Pseudo-classes - Hover, Visited, Active, Link

Jeff Andersen (CSS / Beginner)

Pseudo classes are used for CSS text rollovers and link states. These properties tell the browser to format the text depending on what state the link is in, whether it has a mouse hovering over it, it has already been visited, it is active or is just a fresh link. To differentiate between the types here are some explanations:

Hover: Means that there is a mouse hovering on it.
Visited: Means that it has already been followed to the set page.
Active: Means that it is in the process of being clicked.
Link: means that it is a fresh link and nothing has happened to it yet.

In the CSS we set this up just like normal attributes, generally we put them in order of activity (link, visited, hover, active). We have to set it up so that they are defined as links, using a:.
a:link {attributes:values;}
a:visited {attributes:values;}
a:hover {attributes:values;}
a:active {attributes:values;}
From there we decide what our links are going to do is these states, whether they're just going to change color or possibly change formatting totally such as font or size/weight. For the sake of the basics i will be using underline, color and no decoration.
a:link {color: red; text-decoration: underline;}
a:visited {color: blue; text-decoration: underline;}
a:hover {color: green; text-decoration: none;}
a:active {color: red; text-decoration: underline;}
So here's a recap of what was stated in the CSS, we have the links starting out red with an underline, if they've already been visited they will be blue instead of red. When hovered upon they will change color to green and the underline will dissapere and if they're in the process of being clicked it will go back to it's normal state of red with underline.

As you can see it's fairly easy to manipulate links, so try messing around with various attributes such as font-weight and text-decoration to make your links unique. You can even experiment with applying backgrounds and borders.

© Copyright 2006 - All Rights Reserved - SiteGuts is a part of the Enthonia Content Network