copyright © CSSPG, lud November 03 1999

 for practical use of CSS

Anchors and CSS

this document is located at...
<URI:http://css.nu/faq/anchors.html>

 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 

• Netscape
  • rules on 'a' override more specific rules on 'a:'
  • Some background colors only appear if 'text-decoration: underline' is included in the rule
  • Background color is rounded to the nearest of the 16 colors on the VGA pallette
  • A:hover is unsupported
  • A:active is unsupported

 Caveats 

• a:hover and a:visited are mutually exclusive
• declarations are just *suggestions*; users can easily override suggestions through user preference dialogs or personal style sheets
• Underlined links are an important clue to new users that a link exists; removing this visual clue may confuse users.

 Links 

CSS Pointers Navigation

Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL

Main Site Navigation

Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?

CSSPG ~ Sue ~ Roland