136 Chapter 8 – Creating LinksAffecting the Appearance of Links
Web Design in a Nutshell, eMatter Editionvisited, and active) that replicate the function of the<body>tag attributes listed in
the section “Setting Colors in <body>” earlier in this chapter. The syntax for speci-
fying colors with anchor pseudo-classes is as follows.
To specify a color for 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 this way is that you separate style information
from content. The major disadvantage is that style sheets (and particularly pseudo-
classes) are currently poorly supported by browsers, so you risk a significant
portion of your audience not seeing your page as you intend.
See Chapter 23,Cascading Style Sheets, for a better understanding of style sheet
syntax and usage.Turning Off Underlines
Thetext-decorationstyle sheet property can be used to turn off the under-
lines 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 under-
line 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 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 }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 Java-
Script 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”
would be displayed 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.