Setting Link Colours

Links are what you use to connect text and images within one of your pages to other pages on your site and other sites. You can also use links to provide for file downloads and to open your visitor's email program to allow them to send you an email. It is important therefore that the text links on your page be easily distinguished from the normal text that surround them. The easiest way of doing this is using different colours. Each web browser has default colours built in that it will use for links but these colours are not always appropriate given the colour scheme that you are using on your site. When this happens, you need to be able to set the link colours for yourself.

There are four or five different states that each link has. It has a normal state (before it is clicked on), an active state (when it is clicked on), a visited state (after it has been clicked on), a hover state (when the mouse passes over it) and in most browsers a focus state if you give it the focus from the keyboard. Each of these can have the colour set separately.

To specify more than one colour for the links on your page you can put something like this in the head section of your page:

<style>a:link  {color:#ffffff;}
a:visited {color:#ffff00;}
a:hover {color:#c0c0c0;}
a:active {color:#00ff00;}

this allows you to set all four colours for all links on the page except those overridden by individual style parameters. If you want to set a focus colour as well then add that either immediately before or immediately after hover. The states must be specified in this order because each state also includes some of the states above it (eg. to make a link active it must be either hovered over with the mouse and then the mouse button depressed or given the focus from the keyboard and the enter key depressed).

To set the link colours for an entire web site place the style statements into a separate file and link it into each page using

 <link rel="stylesheet" href="file.css" type="text/css">

where file.css is the name of the file containing the stylesheet commands. Note that you do not use <style> and </style> if you use an external file.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow