Changing Link Colours In HTML

CSS makes it easy to change the colours of links in HTML. However, in most cases this makes it difficult for visitors to move around the website.

How to do it

By adding the following code to the <head> section of the document, the colours of normal links, visited links and active links will be changed to blue, purple and red respectively:

<style type="text/css">
  a:link{
    color:blue;
  }
  a:visited{
    color:purple;
  }
  a:active{
    color:red;
  }
</style>

CSS allows colours to be specified by name or by red, green and blue components. If you want to learn CSS, two of its creators have written a book about it:

Why not to do it

Links colours are one of the few features standardised between different browsers. Visitors know that if they see a blue link, they haven’t followed it before, but if they see a purple link, then they have, and rely on this feature to be able to find their way around a site easily. The only situation link colours can be safely changed is in navigation systems (for example, menu bars). Even in this case, visited links should be darker than unvisited links, and if a colour is set for active links it should be lighter.

For more information on the use of non-standard link colours, and other usability issues, try Jakob Nielsen’s excellent book, Designing Web Usability:

This article was last edited on 9th April 2007. The author can be contacted using the form below.