DEV Community

Arun Kumar
Arun Kumar

Posted on

Css basics selectors

#frontend #developer #payilagam

CSS selectors are used to locate HTML elements you want to style in your programs. Think of these like patterns or codewords that all you to specifically search for and modify particular aspects of your code. Using CSS selectors will speed up your front-end life and make it far easier to edit code quickly.

Today, we'll show how to implement all the most useful CSS selectors, from basic selectors

we’ll talk about:

  • what are CSS Selectors -Basic Selectors

1.What are CSS Selectors

An external stylesheet is a separate file from your HTML document. To link the two, you will need to add a to the head of your HTML document that references the CSS file you create.

This external stylesheet will contain individual CSS Rules -- blocks of CSS that contain a CSS Selector and a set of CSS properties called the declaration block.

The CSS Selector dictates which HTML element to apply the properties to.

body {  /* <-- this is the CSS Selector */
   text-align: center; /* <-- this is one CSS Property */
   margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Both the CSS Selector and the declaration block make up one CSS Rule. Next, we’ll take a look at some of the common ways to select HTML elements so you can style your web pages.

Basic Selectors
Universal selector

* {  
   box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

The universal selector, indicated by the *, selects everything on the page. A common use of this selector is to indicate the box sizing on the page.

Tag Selectors

p {  
   font-size: 14px;
}
Enter fullscreen mode Exit fullscreen mode

Tag selectors select HTML elements based on their tag. The example here shows that all p tags will have a font size of 14px.

Class Selectors
CSS selectors

.none {  
   display: none;
}
Enter fullscreen mode Exit fullscreen mode

Class selectors select HTML elements based on their class names. The class is selected by using a .symbol. The example here shows that all elements with the class name of .none will not be displayed.

ID Selectors

#container {  
   margin: 0 auto;
   padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

ID selectors select HTML elements based on their ID. They are selected using #. The example here shows that the element #container will have a margin of 0 auto and 0 padding.

Top comments (0)