Styling Links

4 Dec 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 10)

Selectors are used to style complete elements (paragraphs, etc) whereas pseudo elements style specific parts of an element, such as the first letter of a paragraph.

Links are styled using pseudo classes, that allow a hyperlink to be styled depending on it’s state. The four main states of a hyperlink are:

:link

Normal link state.

:visited

The state of a link that has been visited

:hover

The state of the link when hovered with the cursor

:active

The state of a link when clicked

It is recommended that link pseudo classes are arranged in this order.

A nifty way to memorize the correct order is:

LoVe HAte

:focus

Another link pseudo class is :focus, that styles links for tabbed browsing.
It is supported by various browsers, such as Firefox, Flock, Seamonkey, although Opera has it’s own system for tabbed browsing. Internet Explorer doesn’t support this pseudo class, using instead a:active for tabbed browsing.

Link pseudo classes are prefixed with the anchor type selector:

a:link
a:visited
a:hover
a:active
a:focus

Main Template Links

First, for the template, I’ll define the colours for the link, visited link, and hover link:

a:link {color:#892d2d;}
a:visited {color:#2d3a89;}
a:hover {color:#892d2d;}

It is possible to group together the a:link and a:hover link classes, but this would go against the recommended order mentioned above.

Next I’ll remove the link underline from the hover, active, and focus links:

a:hover, a:active, a:focus
{text-decoration:none;}

For the active and focus links I’m using the same background and foreground colours:

a:active, a:focus
{background-color:#892d2d; color:#f5efef;}

Horizontal Navi Links

Links in the main content of a Website require an appropriate amount of styling to stand out from the normal text. On the other hand, navi bar links are widespread on the web, and are automatically recognizable as links.

However, users always expect a link to act differently when hovered.

I’m going to make a couple of changes for the main menu. Because I only want to make changes to the navi links, I’ll prefix the link classes with the div id (#c1).

First, I’ll remove the underline from the normal and visited links.

#c1 a:link, #c1 a:visited
{text-decoration:none; color:#892d2d;}

And add a different hover colour, so that the link reacts in some way to the user, as would be expected.

#c1 a:hover {color:#421c1c;}

Check out the template so far

Further examples of styling links

< Back to everything
Keep going… >

Related Posts

• Creating a <div> based Template using CSS (part 1 - 12)
• Creating rounded corners when working with screenshots
• Styling Horizontal Rules
• AA: Division based xhtml and css Template
• Styling Tables