In the two previous parts of this series, we looked at why CSS is called by that name and the importance of CSS to web designing. In this part, we will cover selectors, which is absolutely crucial in understanding how CSS works.
Linking Presentation and Content
In part 2, we learned that CSS helps us to separate the content of a web page from the presentation of that content. This separation is a very much desired technical feature that enables web designers to vary the presentation (or style) of a web page without much of a hassle.
Though this separation is technically better, it becomes useless if we don’t have a way of attaching a given presentation aspect (i.e. a CSS rule) to some given content (i.e. an HTML element). This is where the selectors come in handy. Selectors are the means by which we link the separated content and presentation.
What is a Selector?
A selector identifies an HTML element in a web page. In other words, a selector selects an HTML element and applies the style rules defined in it, to that selected element.
If you open your Blogger template in Edit HTML mode and scroll to the template skin area, you find many CSS selectors applicable for that template. a, .sidebar, #main-wrapper are some examples for selectors found in most of Blogger’s templates.
Types of Selectors
There are many types of selectors in CSS. Out of them, the following three are very important.
- Type (Element) Selectors
- Class Selectors
- ID Selectors
background-color:black;
}
A Class Selector is applied to one or more HTML elements which have their class attribute set equal to the name of the Class Selector. A Class Selector is defined using any name with a dot ( . ) in front. There should not be a space between the dot and the name of the CSS selector.
A Class Selector called “myclass” is shown below.
color: red;
font-size:10pt;
}
To apply the above CSS rule, we have to add the required HTML element to that class using the class attribute.
This paragraphs text will be in red color size 10 fonts.
</p>
An ID Selector is applied to one and only one HTML element in a web page that has an ID equal to the name of that selector. The name of an ID selector is preceded by a hash ( # ) character.
#outer-wrapper is an example for an ID Selector with the name outer-wrapper and the following div element has its ID set to outer-wrapper so that the #outer-wrapper CSS rule gets applied.
</div>
Note that when Class and ID selectors are applied to HTML elements, the values given for the class and id attributes include only the name of the selector. The dot or the hash characters are not used for the attribute value.
The Class and ID selectors are functionally similar. They differ due to the fact that a Class Selector can be applied to a group of HTML elements whereas an ID Selector is limited to a single element.
There is a lot more about CSS selectors. Pseudo selectors, descendant selectors, child selectors and specific class and ID selectors are other important concepts. However, as this article series is about CSS basics, I will limit the discussion to the above three.
