7. Link States and CSS

You've probably set up the default colors for links in your web pages before, different colors depending on whether a link destination has been visited or not, and for when it is active.

In this lesson we will learn how to do something very similar using style sheets.

The Different Link States

In style sheets links can have four different states

link - this is the normal state
visited - when a browser has visited that destination recently
active - while the link is being clicked
hover - while the cursor is over the link

With style sheets, we can create rules that apply to links in any of these states.

These rules are very similar to the rules we have already seen. The real difference here is a special kind of selector, which selects links in the various states.

The form of this selector is A:state, that is

A:link
A:visited
A:active
A:hover

Note, at this stage, the hover state is not supported by Netscape Navigator.

Exercise 1

Create a set of rules which apply different colors to your links in each of the different states.

Hint: the property which specifies text color is the color property. Colors can be specified by one of 16 keywords, or by hexadecimal values, just as with HTML. For more on the color values, see the resources at the end of the tutorial.

The form of the hexadecimal color values is #RRGGBB where

RR is the value for red, between 00 and FF hexadecimal
GG is the value for green, between 00 and FF hexadecimal
BB is the value for blue, between 00 and FF hexadecimal

Example answer at the bottom of this lesson.

Does it work? Time to save the style sheet, and face the music, by opening that page in a browser.

Beyond Color

Thinking back to our first rule, when we set up the background of our pages, you'll remember that with style sheets not only can the page itself have a background color or image, indeed any element can take a background. A style of link that I find attractive, and useful is one I first saw as part of Tod Fahrner's core style sheets project.
This places a colored background behind a link, which changes when a link has been visited, or while the mouse is over it.

Exercise 2

Based on what we learnt above, and in our lesson on backgrounds, we want to develop a set of rules which apply different background colors to links in each of these four states.

Example answer at the end of the lesson.

Again, save the style sheet, and open the page in a browser. Not working? Sometimes I find you need to close the window, open a new one, and open the page again. Also ensure that the style sheet is saved.

In this lesson we learnt about styling links with style sheets. We built on our knowledge of selectors, and learnt about a new one, for selecting links in various states. We also saw in practice how backgrounds can be applied to more than just the body of a page.

So far we haven't seen much about the page layout features of style sheets. That's what we'll tackle next.

Example answer for Exercise 1

A:link {color: #ffcccc}

A:visited {color: #ff99cc}

A:active {color: #ff66cc}

A:hover {color: #ff33cc}

Example answer for Exercise 2

A:link {background-color: #ccffcc}

A:visited {background-color: #99ffcc}

A:active {background-color: #99cccc}

A:hover {background-color: #66cccc}