This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

Anchors and CSS

CSS and the Amazing Technicolor Anchors

With the deployment of CSS implementations, presentation suggestions of anchors of different colors has become trivial. CSS authors would be well advised to understand the issue of link colours from the standpoint of useability, as described in #8 in Jakob Nielsen's Top Ten Mistakes in Web Design article.

The easiest way to suggest different colours is to assign classes to the CSS anchor pseudo-class, such as:

 a.important:link {color: red; background: white; text-decoration: none;} a.onsite:link {color: blue; background: white; text-decoration: none;} a.internal {color: green; background: white; text-decoration: none;} a:hover {color: purple; background: transparent;} a.important:visited {color: black; background: white; text-decoration: underline;} a.onsite:visited {color: black; background: white; text-decoration: underline;}

Then, simply call them out in the html with:

 <P><A CLASS="important" HREF="http://www.useit.com/alertbox/9605.html"> Top Ten Mistakes in Web Design</A></P> <P><A CLASS="onsite" HREF="anchors.html">This document</A></P> <P><A CLASS="internal" HREF="#links">Links</A></P>

The links then look like this in your browser:

Top Ten Mistakes in Web Design

This document

Links

Implementation Bugs

Caveats

Links

Sue Sims