CSS Is Easy!

CSS Selectors

To every CSS style definition there are two components: the selector, which defines which tags the style will be applied to, and the attributes, which specify what the style actually does. In the previous example, the selector was H1, specifying that the style should apply to all <H1> tags. The remainder of the style definition was the attributes, specifying the font and colour that should be applied by the style. In this section, I’ll describe the basic CSS selector types, giving examples of each.

Tag Selectors

The most basic form of selector is that which we have already seen. By naming a particular HTML tag, you can apply a style definition to every occurrence of that tag in the document. This is often used to set the basic styles that will appear throughout a Web site. For example, the following might be used to set the default font for a Web site:

BODY, P, TD, TH, DIV, BLOCKQUOTE, DL, UL, OL {    
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;    
 font-size: 10pt;    
 color: #000000;    
}

This rather long selector is a list of tags, all of which will take on the style definition (font, size, and colour). In theory, the BODY tag would be all that is needed (since all of the other tags appear inside the BODY tag, and would thus inherit the properties), but many browsers don’t properly carry style properties into tables and other elements, so I specified the other elements for the sake of completeness.

Pseudo-Class Selectors

The formatting of the <A> tag in HTML is more versatile than it is for most other tags. By specifying LINK, VLINK, and ALINK attributes in the BODY tag, you can set the colours for the various states of the links in your page (unvisited, visited, and being clicked on respectively). CSS provides its own way of doing this, and adds a fourth state for when the mouse is over the link. Consider the following example:

A:link { color: #0000FF; }
A:visited { color: #FF00FF; }
A:hover { color: #00CCFF; }
A:active { color: #FF0000; }

This code contains four CSS style definitions. Each of the selectors uses what is termed a pseudo-class of the <A> tag. The first applies to all links, and specifies that they should be blue. The second applies to visited links, and overrides the first definition by making them magenta. The third style definition overrides the first two by making links light blue when the mouse is over them (note the name of the pseudo-class: hover), whether they be visited or not. The final style definition makes links red when clicked on. Since it appears last, it overrides the first three so that it will take effect whether the links be visited or not, and whether the mouse is over them or not. Note that the hover pseudo-class is not supported by Netscape 4.x (Netscape 6 does support it, however).

<A> is the only tag that has pseudo-classes under the original CSS1 specification, and all four are demonstrated in the example above. The newer CSS2 spec that is beginning to see support in recent browsers specifies several other pseudo-classes, most of which have to do with how elements look when printed.

Class Selectors

Assigning styles to tags is all well and good, but what happens if you want to assign different styles to identical tags in different places in your document? This is where CSS classes come in. Consider the following style, which makes all paragraph text in the page blue:

P { color:#0000FF; }

Now, what if you had a sidebar on your page with a blue background? You wouldn’t want text in the sidebar to be blue as well, because it would be invisible! What you need to do is define a class for your sidebar text and then assign the CSS style to that class instead:

P { color: #0000FF; }
.sidebar { color: #FFFFFF; }

This second rule uses a class selector that indicates the style should be applied to any tag of the sidebar class. The period indicates a class is being named instead of a tag. To create a paragraph of text of the sidebar class, you add a CLASS attribute to the tag:

<P CLASS=”sidebar”>This text will be white, as specified by the CSS style definitions above.</P>

Now, what if there were links in your sidebar? By default, they’d be rendered just like any other links in your page; however, add a CLASS=”sidebar” attribute to the tag, and they’d turn white as well:

<P CLASS=”sidebar”>This text will be white, <A CLASS=”sidebar” HREF=”link.html”>and so will this link</A>.</P>

That’s pretty neat, but what if you wanted to make the links to stand out a bit more by displaying them in bold text? Adding the bold text attribute to the sidebar class would make your whole sidebar bold. You need a CSS selector that selects links of the sidebar class only. By combining a tag selector with a class selector, you can do exactly that:

P { color: #0000FF; }
.sidebar { color: #FFFFFF; }
A.sidebar:link { font-weight: bold; }

Note that we’ve also used a pseudo-class to specify <A> tags that are links (as opposed to <A NAME> tags that are not).

Note also that our sidebar links are still white – both of the styles pertaining to the sidebar class apply to our sidebar links. If we specified a different colour in the third style, however, links would adopt that new colour since the third selector is more specific, and CSS styles are applied in order of increasing selector specificity.

Incidentally, this effect of applying multiple styles to a single page element is called cascading, and is where Cascading Style Sheets got their name.

Finally, you may find that the link does not appear in bold under Netscape 4.x due a bug in that browser. An alternative approach that achieves the same effect is demonstrated in the next section.

Contextual Selectors

If your sidebar happens to contain a lot of links, it becomes tedious assigning the sidebar class to every single <A> tag. Instead, wouldn’t it be nice to use a selector that selected any link appearing inside a paragraph of the sidebar class? That’s what contextual selectors are for: selecting a tag based on its context; that is, based on the tag(s) that contain it.

Here’s the new CSS:

P { color: #0000FF; }    
.sidebar { color: #FFFFFF; }    
P.sidebar A:link {    
 font-weight: bold;    
 color: #FFFFFF;    
}

And here’s the updated HTML:

<P CLASS=”sidebar”>This text will be white, <A HREF=”link.html”>and so will this link</A>.</P>

As you can see, a contextual selector provides a list of selectors separated by spaces that must match tags ‘from the outside in’. In this case, since the link (matched by the A:link selector) is inside a sidebar paragraph (matched by the P.sidebar selector), the style applies to the link.

Note that to keep the link white, we had to add that colour to the CSS attributes for the links, since the style for the sidebar class no longer applies to the links.

ID Selectors

Similar to class selectors, ID selectors are used to select one particular tag, rather than a group of tags. The tag that you select is identified by an ID attribute as follows:

<P ID=”sidebar1”>This paragraph is uniquely identified by the ID “sidebar1”.</P>

An ID selector is simply the ID preceded by a hash (#). Thus, the following style will make the above paragraph white:

#sidebar1 { color: #FFFFFF; }

ID selectors can be used in combination with the other selector types. The following style, for example, applies to links appearing in the sidebar1 paragraph:

#sidebar1 A:link {
font-weight: bold;
color: #FFFFFF;
}

Other selector types exist but they are not widely used, and support for them in some browsers (especially Netscape 4.x) is buggy at best.