Chapter 59. Applying Styles to Hyperlinks


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"> 

GEEKSPEAK

An unvisited link is a link to a page that the browser doesn't remember visiting. A visited link is a link to a page that the browser does remember visiting. An active link is a link that the visitor is currently clicking or highlighting.


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.

Table 59.1. HTML Link Attributes

ATTRIBUTE

CONTROLS

link

The color of unvisited links

vlink

The color of visited links

alink

The color of links when clicked or highlighted


FAQ

How do I highlight a hyperlink?

Surely you know how to click a hyperlink, but not everyone knows how to highlight a hyperlink, mainly because most people don't realize that you can navigate Web sites in Internet Explorer and Netscape without a mouse.

Here's how it works: You cycle through the interactive elements on the page by pressing the Tab key, and then you press Enter to activate an element when you come to it. That's how you highlight a hyperlink: You tab onto it, giving it focus, in Web jargon. IE changes the link to its active color. If you tab past the hyperlink, it loses focus and reverts to its default color, either visited or unvisited.

While you can highlight links in Netscape, this browser doesn't change the color of the link to its active value.


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.

GEEKSPEAK

A pseudo-class is a special addition to the anchor-tag selector that tells the browser to which link state the style rule applies.


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.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net