Brought to you by Style Master

7. Links

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

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

Link States

In style sheets links can have four different states

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

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

To create a statement with a selector for links in these various states

1. choose New Statement... from the Statement menu

2. in the dialog box that opens, choose Pseudo Class Selector then click OK. (These selectors have the fancy technical name of pseudo class selectors

3. the pseudo class selector editor opens

4. choose the type of selector (link, active, etc.) from the popup menu

5. click Create

 

Exercise 1

Create a set of rules which apply different colors to your links in each of the different states. You'll need to create four pseudo class statements.

Hint: the property which specifies text color is the color property. It is one of the text style properties, along with font-family, and font-size.

Does it work? Time to save the style sheet, and face the music, by previewing 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.

Next

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}

 

The House of Style