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: