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
Type or Element Selectors identify basic HTML elements.
p (paragraph),
a (anchor),
body, table are all examples for basic HTML elements. An
Element Selector is defined simply by using the element's name as the name of the CSS rule. For example, the following CSS rule selects the entire
body element of an HTML page and changes its background color to black.
body {
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.
.myclass {
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.
<p class=”myclass”>
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 id=”outer-wrapper”>
</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.
