Styling Links

There is a type of class called a pseudo-class

These relate to special categories of existing html tags for example the link tag.<a>
Using pseudo classes we can style the way links are displayed depending on whether they are active, visited or have the mouse hovering over them.
We can apply styles to these pseudo classes.

• a:visited - occurs where a link has been used previously
• a:hover - occurs when the mouse cursor is over the button.
• a:active - occurs when the mouse button is down on the link.

(If you intend to style all these make sure you style them in the order used above.)

This is a far more reliable method than using html attributes, such as vlink, which are not supported consistently by browsers.

Although the W3C states the :hover class should work with all elements, IE6 only supports the <a> tag.

Example This is a Restyled Link, only showing an underline when the mouse hovers over it.

Here is the stylesheet code.

<style type='text/css'>
a {text-decoration:none} /*don't show default underlines for links */
a:hover {text-decoration:underline;}
</style>

Try Hovering the mouse over these Sample Links

Link number 1	Changes the background-color and adds an underline
Link number 2	Reverses the colours.
Link number 3	Changes the background-color and adds a box
Link number 4	Changes the background-color and adds a box. Click the link to use the a:active class to change the font color to navy.

Exercise
Create a page where hovering the mouse over a link changes it to white on blue with an outset border.

---