Ken Ward's Cascading
Style Sheets Tutorial


[Main Site Page: Freeing the Mind]
[Cascading Style Sheets: Contents]
[Previous: Font Selector]
[This Page: Anchors]
[Next: Class Selectors]


Anchors can have four properties:

  1. link
  2. active
  3. hover
  4. visited

The link property is the normal, untouched link. When it is active, it about to go to the URL. When the mouse is over it, it has the hover property. And when it is one we have visited, then it has the visited property.

Anchor is the selector. The 4 options are technically called pseudo class selectors. For example, this is a link to the contents page:

Contents of the CSS Tutorial.

We can control the appearance of the anchor under its various conditions with the following code:

A:hover {color: #ff0000;
font-family: fantasy;
font-weight: bolder}

A:visited {background-color: #0000ff;
color: #ffff00;
font-weight: bolder}

A:link {background-color: #0000ff;
color: #00ff00;
font-weight: bolder}

This is just the same sort of code applied to three of the conditions of the anchor. In all cases we make the font bolder. We have used a different value for the font family in the 'hover' case. And we have used different colours. You can see the effect above and below.

Let's look at class!