Setting the Color of Links

When setting the color of fonts special attention should be paid to links. Browsers render links in different colors than the rest of the text. If you set the background color of the page you not only need to set the color of the regular text but of the links as well.

To set the color of links we use three pseudo-classes of <A ...>: link for when the link has not been visited, visited for when the link has been visited, and active for when the user is clicking on the link. So, for example, the following code (in a STYLE tag or in a style sheet file) creates a class called darkblue which has a dark blue background and white letters. It also sets the styles of anchors within darkblue when they are regular links (white), visited links (yellow), and when the user is clicking on the links (fuchsia):

.darkblue
   {
   background-color:#000080;
   color:white;
   }
.darkblue A:link{color:white}
.darkblue A:visited{color:yellow}
.darkblue A:active{color:fuchsia}

When we apply darkblue to a <DIV ...> element:

<DIV CLASS="darkblue">
Take a look at our <A HREF="./">home page</A>
</DIV>

we get this:

Take a look at our home page

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License . Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.