Affecting the Appearance of Links (Web Design in a Nutshell, 2nd Edition)

11.4. Affecting the Appearance of Links

As we all know by now, linked text is blue and underlined by default and graphics are identified by blue borders (unless you turn them off). But it doesn't have to be that way. Changing the color of links is easy with HTML, so you can make your links more coordinated with your chosen site palette. Style sheets offer even more control over the appearance of links.

You should exercise some caution in changing link appearance. The blue text and underlines have become a strong visual clue for "click here," so altering this formula may confuse your users. Use your knowledge of the savvy of your target audience to guide your design decisions. In general, as long as the link colors are consistent throughout a site and noticeably different from the default text style, changing the color is not a problem for the usability of the site.

11.4.1. Setting Colors in <body>

Link color specifications in the <body> tag are applied to the whole document. See Chapter 16, "Specifying Color in HTML" for instructions on providing color values for the following attributes.

Links	`<BODY LINK="`color`">`	Sets the color for hyperlinks. The default color for links is blue.
Visited Links	`<BODY VLINK="`color`">`	Sets the colors for links that have already been clicked. The default color for visited links is purple.
Active links	`<BODY ALINK="`color`">`	Sets the color for a link while it is in the process of being clicked. The default color for an active link is red.

11.4.2. Specifying Color for a Specific Link

You can override the color of a specific link by placing <font> tags within the anchor tags as shown in this example:

<A HREF="doc.html"><FONT COLOR="aqua">Specially colored link</FONT></A>

There is no way to set the visited link and active link colors for specific links. This feature is supported by Versions 3.0 and higher of Internet Explorer, and Netscape Navigator Versions 4.0 and higher. This technique is discouraged in the HTML 4.01 specification in favor of style sheet controls (see the next section).

11.4.3. Setting Global Link Colors with Style Sheets

You can apply almost any style sheet property to a link by using the anchor tag (<a>) as a selector. This example specifies a color for all the links in a document:

A {color: #rrggbb or colorname}

Note that the color will also be applied to text contained within <a> tags with the name attribute (named anchors). If that's not the effect you're after, try the a:link pseudo-class technique introduced next.

To change the color just for specific links, label them with a class attribute:

<A CLASS="internal" HREF="linkypoo.html">Go to another page</A>

and include the class in the selector of the style sheet rule as follows:

A.internal {color: #rrggbb or colorname}

CSS1 introduced a group of pseudo-classes (link, visited, and active) that replace the function of the <body> tag attributes listed in Section 11.4.1, "Setting Colors in <body>" earlier in this chapter. The syntax for specifying colors with anchor pseudo-classes is as follows:

To specify a color for unvisited links:
```
A:link {color: #rrggbb or colorname}
```

To specify a color for visited links:
```
A:visited {color: #rrggbb or colorname}
```

To specify a color for active links:
```
A:active {color: #rrggbb or colorname}
```

The advantage to setting colors with style sheets is that you separate style information from content. The major disadvantage is that style sheets (and particularly pseudo-classes) are not supported by all browsers, so you risk a portion of your audience not seeing your page as you intend.

See Chapter 17, "Cascading Style Sheets" for a better understanding of style sheet syntax and usage.

11.4.4. Turning Off Underlines

The text-decoration style sheet property can be used to turn off the underlines for all the links in a document (it is supported by all browsers that support style sheets). Use this with caution, however, since most users rely on the underline to indicate what is "clickable," particularly now that brightly colored HTML text is more prevalent. Be sure that your interface and system of visual cues is clear enough that links are still evident.

The style sheet rule for turning off underlines on hyperlinks and named anchors is as follows:

A { text-decoration: none }

To turn off underlines for specific links, label them with a class attribute:

<A CLASS="internal" HREF="linkypoo.html">Go to another page</A>

and include the class in the selector of the style sheet rule as follows:

A.internal { text-decoration: none }

11.4.5. Changing Status Bar Text with JavaScript

By default, when you position the mouse over a link, the browser displays the target URL in the status bar at the bottom of the browser. Use the following JavaScript command in an anchor tag to change the status bar message to whatever text you specify. In this example, the phrase "Samples of my web design work" will display in the browser's status bar.

<A HREF="web.html" onMouseOver="window.status='Samples of my web design 
work'; return true;">The Web Lounge</A>

Be aware that many users value the ability to see the URL for a link, so if you are going to change the message, make sure that you substitute worthwhile and descriptive messages. Otherwise, you risk making your site less pleasant to use. Status bar messages are also easily overlooked, so don't rely on them to clarify navigation.