A 'Short' Tutorial on CSS- The Pseudo Class

Remove those undies

No, you haven't entered the XXX section of Spider Food. In order to demonstrate Pseudo Classes, we're going to show you how to remove the ever annoying underlines from your links (I know you hate them).

To do this, we're going to use the Spider Food navigation bar as an example. As you recall from the last page, we redefined our <A> tags in our CSS file, using the following rules:

 .links    { FONT-SIZE: 11px; 
             COLOR: #003399; 
             FONT-FAMILY: Arial; 
             TEXT-DECORATION: none }
 a:hover   { COLOR: #cc3333; 
             TEXT-DECORATION: underline }

Each link on the left hand side is defined like this:

<a class="links" href="link.htm">Link</a>

In our style definition, we have the following declaration defined for Links, TEXT-DECORATION: none. This removed the underline from our links. The A:hover rule uses the pseudo class "hover" to change the appearance of our link when the mouse is "hovered" over the link. If you move the mouse over the left hand navigation, you'll notice that the links not only change color, but also become underlined when you move your mouse over them. Ahh, the wonder of pseudo classes

There are several pseudo class in the CSS1 specification. There are three for the <A> tag:

a:link { color: red } /* unvisited link */ 
a:visited { color: blue } /* visited links */ 
a:active { color: lime } /* active links */ 

The A:hover pseudo class was added in the CSS2 specification, and since then, the TEXT-DECORATION: none property has become one of the most used (and often abused) parts of the specification. Be careful using the no undies settings, as people still expect to find their links with underlines. Sometimes they won't even know your links are indeed links.

There are multiple other pseudo elements, but they are not fully supported by the browsers, so I'm not going to cover them in this tutorial.

Well class, that's all we have for today, but go on to the next page to visit some more in depth resources for all your CSS needs.