Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

active, link and visited

The :active, :link, and :visited pseudo-classes allow you to customise how the browser displays links (text that the user clicks to jump to another page). You have three options:

  • a:link represents a link that you haven't visited
  • a:visited represents a link that you have already clicked
  • a:active represents a link that is currently being visited. For example, if your Web page consists of two frames —a contents frame and a viewer frame— and you click a link in the contents frame, the link will be "active" while you look at that article

You can set any font or text formatting properties on these anchor pseudo-classes, including color, font-size, font-weight, and text-decoration. For example:

a:link    {color: blue;}
a:visited {color: maroon;}
a:active  {color: green;}

Set text-decoration to "none" to remove the underlining from the link text:

a:visited {color: blue; text-decoration: none;}

Note: Internet Explorer 3.0 does not support the a:active class. You'll also find that if you set a property on a:link, visited links inherit that property.

You can also use a:hover to change the appearance of a link when the mouse hovers over it. For example:

a:hover {color: red;}