In the world of web pages, there are lots of links, and each link can have one of four states for a link, listed here in order of priority:

• link - A link which is just displayed (not in any other state
• visited - A link to a page the user has visited (not necessarily through your link)
• active - A link being clicked
• hover - A link with the mouse over it, not being clicked

To change the styling for a pseudo-class (or state-class) you use a : between the selector and the classname, rather than a dot. In the CSS for Openzu we have changed the pseudo-classes for the <a> element, as follows:

a:link {color: #0699B2;}
a:visited {color: #0699B2;}
a:active {color: #0699B2;}
a:hover {color: #101010; text-decoration: none;}

a.rev:link {color: #101010;}
a.rev:visited {color: #101010;}
a.rev:active {color: #101010;}
a.rev:hover {color: #08B7D3; text-decoration: none;}

As you can see, in the first example we have changed the color property for all of the <a> elements on our page - and have made the links change color and remove their text-decoration when they are hovered over. We have kept visited links the same color as non-visited links - which some people would say is a bad idea, but we have found it can work well depending on the content you are linking to (and we have other classes which do change color).

Our second example changes the appearance of <a> elements with the class "rev". It does the same kind of thing, but uses inverted colors to the standard links on the site. Here is an example of the code working:

<a href="http://www.openzu.com">Openzu</a>
<a class="rev" href="http://www.openzu.com">Openzu</a>

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.