CSS defines another type of class, a pseudo-class, that can be used as part of a selector. Pseudo-classes differ from regular classes in several important ways:

Most modern browsers have supported pseudo-classes for a number of years, but Internet Explorer (sigh...) has been slow to accept them. IE 6 only supports a few of the CSS pseudo-classes, and even then only in restricted domains. In this section we will focus on one common use of pseudo-classes that IE 6 does support: creating roll-over effects for hyperlinks.

Hyperlink Pseudo-Classes

Hyperlinks exist in one of four separate states:

Not surprisingly, CSS defines pseudo-classes that represent each of these states. Each pseudo-class allows the developer to control a complete range of properties for the a tag, including its color, background color, font size, font weight, underline, and so on, whenever the link is in the state the pseudo-class responds to.

The syntax for defining a style rule with a pseudo-class selector is:

a:link {color: #990000;}

This rule states that all unvisited hyperlinks will be burg andy (at least until the mouse rolls over them). I doubt it will surprise you to learn that the three remaining pseudo-classes we will use are :visited, :hover and :active .

Note

Normally there are several properties of the a tag -- such as font-family and font-size -- that you will not want to change as the link moves through each of its four possible states. Simply attach those styles directly to the a tag (using the syntax for defining a rule for an HTML tag) and then follow that declaration with a tag pseudo-link rules which define the properties you do want to change for each of the hyperlink's states.

A Simple Example

Now let's add a navigation bar to our tutorial page. It is standard practice to enclose a navigation bar in its own div container, so I will add the following lines of code to my HTML document:

<div id="nav_bar">   
   <a href="http://en.wikipedia.org/wiki/The_Raven">More about 
      <em>The Raven</em></a>
</div> 

My page now looks like:

screen shot of  document in Design view

Typically, links in a navigation bar are contained within a list which can then be styled, but as the purpose of this tutorial is to introduce pseudo-classes, let's focus simply on styling one link. If you're interested in learning more about styling navigation bars, you might want to look in a text book on CSS.

First, let's move the link to the center of the page with the style:

div#nav_bar {
   text-align: center;
} 

And now let's add a style rule for the a tag; I'm selecting new property values for the hyperlink's font, font-size, weight, font-variant and color properties (the browser defaults for hyperlinks include an underline, so I don't need to select this for the a tag). And if you look at the heading for the Rule Definition box, you'll see that I'm defining my rule using a contextual selector -- I'll discuss the reason for this soon.

screen shot of rule definition box

My page now looks like:

screen shot of Design view of tutorial page

If you open this page in a browser, you will see that the link functions correctly (it will open the Wikipedia page for you) but it doesn't change in any way when the mouse moves over it!

So now let's use pseudo-classes to change the (very boring) behavior of this link. First we'll define a style for the :visited pseudo-class:

CSS Link Visited

Again, notice that I'm defining the rule using a contextual selector. I'll define a rule to change the color of the link and ensure that the link is underlined with the code:

screen shot of Rule definition box

I'll now style the :hover pseudo-class, making the link a lighter burgundy and removing the underline.

screen shot of Rule Definition box

My style rules for navigation now look like this:

div#nav_bar {
text-align: center;
}
div#nav_bar a {
font-family: "Times New Roman", Times, serif;
font-size: 0.8em;
font-weight: bold;
font-variant: small-caps;
color: #990000;
} div#nav_bar a:visited {
color: #AA8E6A;
text-decoration: underline;
}
div#nav_bar a:hover {
color: #bb5555;
text-decoration: none;
}

Dreamweaver's Document pane can't show the link's new behaviors, but if you open the page in a browser you will see that the link turns a paler red and looses its underline when the mouse is over it and turns a pale brown (and regains its underline) after the link has been clicked.

Caution

You don't need to define rules for all four states of a hyperlink, but you do need to define the pseudo-class rules in a specific order! (Some browsers will ignore some of your rules otherwise.) Define the rules as follows:

  • a tag
  • a:link pseudo-class
  • a:visited pseudo-class
  • a:hover pseudo-class
  • a:active pseudo-class

You can use the mnemonic LoVe-HAte to help you remember the correct order.

Let's return to the reason I defined all of my hyperlink pseudo-classes as contextual selectors. In "real world" sites it's common to have hyperlinks in a menu bar (or maybe in more than one...) as well as within the text of the page. Contextual selectors allow you to target specific groups of links so that you can apply different styles to them. For example, if my simple page had links in the content area, I might want to change their size slightly so that they would match the size of the content area text, and I would do this using contextual selectors.

One last comment: according to the CSS recommendations published by the W3C, the rollover pseudo-classes can be applied to any selector. Most modern browsers honor this recommendation, allowing you to create rollover effects on paragraphs or images or anything else your heart desires. IE 6, however, only recognizes these pseudo-classes when they are associated with the a tag, so if you use these pseudo-classes with other tags, be aware that some viewers will not see your magnificent effects.

* click the link below to read the next tutorial *
Creating a Style Sheet