HTML provides a basic set of attributes for controlling the appearance of hyperlinks on your page. These attributes appear in the body tag: <body link="#0000FF" vlink="#FF00FF" alink="#FF0000">
Table 59.1 summarizes the link attributes. As you can see, HTML ties them to three link states: the unvisited state, the visited state, and the active state. You use color to tell the three states apart. An unvisited link is a link to a page that the browser doesn't remember visiting. The default color of unvisited links is blue. A visited link is a link to a page that the browser does remember visiting. The default color is purple or magenta. Finally, an active link is a link that the visitor is currently clicking. In Internet Explorer, the active-link color also appears when the visitor highlights a link.
To set custom colors for the link states on your page, specify them directly with the link, vlink, and alink attributes. It's hard to believe that the Web got as popular as it did with so few design choices for the most essential element on any Web page. You have three link colors for three link states, and that's it. But the design doors open wide when you format links with Cascading Style Sheets (CSS) instead of HTML attributes. At the most basic level, CSS mimics the roles of the link, vlink, and alink attributes with the link, visited, and active pseudo-classes. In CSS, a pseudo-class is a special addition to the anchor tag that tells the browser to which link state the style rule applies. In Topic 57, you looked at the pseudo-elements first-line and first-letter. Pseudo-classes are similar, but they apply only to the anchor tag at present.
The following block of CSS code has the same effect as the attributes in the body tag at the beginning of this topic: a:link { color: #0000FF; } a:visited { color: #FF00FF; } a:active { color: #FF0000; } Those style rules are just begging to be elaborated. How about setting unvisited links and active links in boldface but leaving visited links in normal type? a:link { color: #0000FF; font-weight: bold; } a:visited { color: #FF00FF; font-weight: normal; } a:active { color: #FF0000; font-weight: bold; } Figure 59.1 demonstrates these styles. Notice how the boldface helps unvisited links to jump off the page, while visited links seem less important. Figure 59.1. Use CSS to change more than just the color of the various link states.Some sites add a subtle background color around hyperlinks, creating a box effect, as in Figure 59.2 Listing 59.1. View Source for Figure 59.2.a { font-weight: bold; } /* Each link state has a different background color in these style rules. */ a:link { color: #0000FF; background-color: #CCFFFF; } a:visited { color: #FF00FF; font-weight: normal; background-color: #CCCCFF; } a:active { color: #FF0000; background-color: #FFCCCC; } Figure 59.2. Add a background-color attribute to the style rule for a link or link state to create a box effect.You can also turn off the default underline, as in Figure 59.3. Listing 59.2. View Source for Figure 59.3.[View full width] a { font-weight: bold; text-decoration: none; } /* You need some sort of visual cue other than just color to designate a hyperlink, so these style rules allow boldface for all three states in absence of a hyperlink. */ a:link { color: #0000FF; background-color: #CCFFFF; } a:visited { color: #FF00FF; background-color: #CCCCFF; } a:active { color: #FF0000; background-color: #FFCCCC; } Figure 59.3. Turn off the hyperlink's underline. |