WebDevRes: Link Colors By Section

Here's a useful CSS trick for controlling link colors differently in different parts of one page. It's useful for having one set of link colors in your menubar, which may have a background color, and another for the content areas.

Here's an example first. Observe that link colors and the hover color (msie only) vary in the left menubar, content area and bottom menubar.

As background, there are several properties for controlling link color. The first three can also be used as attributes of the BODY tag, where they set the colors for all links on the entire page.

In browsers supporting CSS (Cascading Style Sheets), you can override the BODY tag attribute and can set properties for particular areas.

In CSS, you set the link colors for the whole page using something like:

a:link    { color: #000099; }
a:visited { color: #800080; } 
a:hover   { color: #FFFFFF; } 
a:active  { color: #ff0000; } 

To set a particular area to different colors, you define that area using a CSS class, then use the contextual selectors in something like the following CSS declarations:

a:visited { color: #CC0066; } 
a:hover   { color: #FF3300; }  /* orangish-red */

.mymenuleft a:link    { color: #000099; } /* Darker blue */
.mymenuleft a:hover   { color: #FFFFFF; } /* white */

.mymenubottom a:link  { color: #FF00FF; } /* fushia */
.mymenubottom a:hover { color: #FFFFFF; } /* white */

The HTML will define particular regions (TD's, DIV's, whatever) as each class, then each link within that block element will be set to that set of colors without having to add class individually to each link. Below is the HTML for the table in Figure 1.

<div align=center>
<table border=1 cellspacing=0 cellpadding=8 width="80%">
<tr valign=top align=left>
<td bgcolor="#6699CC" class="mymenuleft">
	<strong>MyMenuleft</strong><br>
	&#183;&nbsp;<a href="linkcolors.htm">link</a><br>
	&#183;&nbsp;<a href="fontcss3.htm">link</a><br>
	&#183;&nbsp;<a href="webdevres.htm">link</a><br>
</td>
<td> <!-- default link coloring -->
	<h4>Content</h4>
	<p>Here is some of your content, with perhaps the
	<a href="colors.htm">occasional link</a> in it.
	Perhaps even <a href="fontcss2.htm">two links</a>.
</td>
</tr><tr valign=top bgcolor="#000000">
<td class="mymenubottom" align=center colspan=2>
	<strong>
	<a href="webdevres.htm">Home</a>
	| <a href="../about/search.htm">Search</a>
	| <a href="../about/sitemap.htm">SiteMap</a>
	</strong>
</td></tr></table></div>

FWIW, CSS lets you change a whole page at a time or a whole site at a time, you don't have to add anything to every link separately (that would be a nightmare...)

Design Note:
This can be used in a backward-compatible fashion. You select the best overall set of colors, ones that are ok in all areas of the page. Spec that set in the BODY tag attributes. Then select sets that are optimized for each area and use CSS to set them. (Maximizing contrast against the backgrounds for instance.) That way CSS-supporting browsers can have the best sets but the non-CSS browsers still have a good compromise set.

Design Philosophy Note:
Keep in mind that while it is obviously possible to change the link colors, it is often better not to do so. In user interface design terms, users are used to seeing certain colors that mean "link" and "visited link" and messing with that can make the user interface less effective. Likewise, taking away the link underlining. Only change the link colors when it's necessary for readability against a background or where it improves the user interface.

Possible Bug Note: When testing this in MSIE, I found that sometimes the hover didn't work over visited links. It seems related to setting .myclass A:visited. If you spec a hover and a visited for the section it seems to break it, as if the visited color was the color at all times. I need to test more to nail the exact behavior here.
Solution: I had the visited line after hover. If I follow the W3C recommendation below about ordering, then this works fine. Thanks to kindler chase for the fix. 7/2001

BTW, W3C recommends that the anchor ("A") pseudo-class selectors be ordered as follows:
  a:link a:visited a:hover a:active.

See also the similar tutorial by Project7, CSS Link Styles- Defined.