Using colour to show hypertext links has been a web standard almost from the beginning. Hypertext links were originally defined as being in one of two "states": visited or unvisited. Showing visited hyperlinks in one colour and unvisited links in another allowed web surfers to see which ones they had already selected.
Early browsers gave the visitor sole control over what colours links showed up in. As browsers developed, web designers were given the ability to define those colours.
A third state was soon added to this: "active" links. Active sets the colour for the link while it is being selected, allowing visitors to confirm that they have clicked on the link they intended to select.
The established way to set the colour of links on a web page is to use attributes in the <body> tag: (eg <body link= "#ff6600" alink="#ffffff" vlink="#ff6600">). This allows us to set the colour of the link (link), the colour of a link when it is being clicked on (alink) and the colour of a link that has already been visited (vlink). Most websites still use this system to define link colours and it will work on all browsers, even the most recent releases.
However, the Worldwide Web Consortium (W3C) has "deprecated" the use of these attributes in favor of Cascading Style Sheets (CSS), which offers much more versatility when setting link colours, not only on a single page, but across an entire site.
Using CSS for easy dynamic links
Not only does Cascading Style Sheets allow you to set the colour of a link, active link and visited link, it also allows you to set other attributes that control the appearance of links. For example, using CSS, you can set the text's font, weight (bold or not), whether it is underlined, the background colour behind the link, its size, or any other attribute available with CSS.
CSS also allows you to set a fourth state for the link: "hover". Hover will be used when the visitor places their mouse over the link (a rollover). However, unlike JavaScripted rollovers, which rely on graphics, you can use HTML text to create yours, making them easier to set up and change. The only problem is that hover is not yet available in Netscape browsers, only in Internet Explorer 4 and above.
The code used to set up link appearance is either included in a <style> tag in the head of the document, or as part of an external file that is then linked to the HTML document:
a:link { color: #cc00000; text-decoration: none; }
a:hover { color: #ff0000; text-decoration: underline; }
a:active { color: #00ff00; text-decoration: none; }
a:visited { color: #990000; text-decoration: none; }
Although CSS gives you the ability to change more than just the colour of a link, I advise caution when changing other attributes for hover. Changing things such as font face, font size or weight can often cause the text to grow larger than the space reserved for it in the layout. This will often cause the entire page to have to refresh to adjust, which can be highly annoying to site visitors.
Choosing the right
link colours
Most browsers default to blue and red or purple for link colours: blue equals unvisited; red/purple equals visited. The problem with selecting two completely different colours is that visitors will not remember which is which. The colours you choose need to distinguish links from other text on the screen, and distinguish between the different states, all without dominating the screen and becoming distracting.
I recommend selecting a colour for unvisited links that highly contrasts with your page's background colour, and also contrasts with the text colour. Then, for visited links, select a darker or lighter version of that colour (depending on how light or dark the background colour is) that will still contrast with the background, but appear dimmer than the unvisited link colour. "Brighter" unfollowed links will then stand out more dramatically than the "dimmer" followed links.
For example, if I was designing a page with a white background and black text, I might use a bright red for my links (#ff0000) and then select a paler red (#ff6666) to show when they had been visited.
Text decoration:
to underline or not?
Underlining has been the standard way of indicating a hypertext link on the web since its inception. In fact, I have seen many sites with the link colours set to black, assuming that people would recognise a link because it was underlined. The problem with underlining links is that if you have a lot of links on a page, you end up with an impenetrable mass of lines, which makes the text difficult to read.
CSS allows us to turn off underlining for links, overriding the visitor's preference. Generally speaking, I recommend this and prefer to rely on clear colour choices to highlight hypertext links. Underlining could then be used to define links in the hover state, so that when the visitor places their mouse over a link, they see a clear visual change.
You might also consider some other alternatives to underlining hypertext links, such as bolding, italics, or other visual distinctions that can work well in conjunction with the colour.
OK, so what else
do we need?
Although the four different link states provided by CSS are very useful, I would recommend a fifth state that would help web designers create more versatile pages. The addition of a "current" attribute would allow designers to set the appearance of a link if it is the same as the page that is currently being displayed. This would allow designers to dynamically show which page the visitor is on without having to code it into every page.
Jason Cranford Teague is the author of 'DHTML for the World Wide Web'. If you have questions, you can find an archive of his column at Webbed Environments or email him at jason@webbedenvironments.com
Comments