CSS-Selectors

How to Select Elements?

Say, you want a certain heading to be styled different from the rest of the content in a web page. Now, using CSS selectors you can target that HTML element to style it differently. CSS selectors help in defining the elements for which a certain set of CSS rules apply. There are various types of CSS selectors that let you precisely choose the elements you want to style. You could give the entire web page a general styling, and then work your way to style other elements of the page. Selectors are a part of a CSS rule, and these selectors come just before the declaration of CSS blocks.

CSS Id Selector

By selecting the id attribute of an HTML element, you can select that specific element. Since the id is unique to a page, you can select the right element by using the id attribute. You can select the HTML element using “#” followed by the id of that element. For instance, “#firstname” selects the element where the id is “firstname”.

CSS Class Selector

Using the class selector, you can select HTML elements that have a specific class attribute. You can define the selector using a period (full-stop symbol) followed by the class name. For instance, .intro selects the elements where the class is “intro”. One thing to keep in mind is that you can never begin a class name with a number.