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.
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 |
Sets the color for hyperlinks. The default color for links is blue. |
|
Visited Links |
Sets the colors for links that have already been clicked. The default color for visited links is purple. |
|
Active links |
Sets the color for a link while it is in the process of being clicked. The default color for an active link is red. |
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).
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.
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 }
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.
Copyright © 2002 O'Reilly & Associates. All rights reserved.