Changing the Appearance of Links

You've no doubt seen web pages that contain links that respond differently than the default behavior, which is to simply appear as underlined blue text (in most web browsers). Most browsers also change the color of a link to purple after the linked page or resource has been opened. This helps to indicate whether you've followed a link before.

CSS includes a mechanism that allows you to change the appearance of links based on the state of the link. For the purposes of applying styles, you can think of a link as having four distinct states:

• Link A link that has not yet been visited.

• Hover A link that has the mouse pointer hovering over it.

• Active A link that is being activated, such as with a mouse click.

• Visited A link that has already been visited.

Each of these link states corresponds with a CSS pseudoclass, which is a special type of style class that applies to the state of an element. Pseudoclasses are unique in that you specify them using a colon (:) instead of a period (.). The pseudoclasses that apply to links are link, hover, active, and visited. To apply these pseudoclass styles, you attach them to the a element like this: a:link, a:hover, a:active, and a:visited.

Following is an example of how to set styles for the a:link pseudoclass, which determines what a normal link looks like:

 a:link {   color:#19619A;   font-weight:bold;   text-decoration:none; } 

Notice that underlining is removed from the link via the text-decoration:none setting, but the link is bolded via the font-weight:bold setting. The color #19619A is a light blue color. This style rule appears later in the lesson in a new version of the hockey player style sheet that you saw earlier in the book.

Coffee Break

For a practical example of how link styles can be used to get a different effect for links, check out the Wired News web site at http://www.wired.com/. The Wired News site displays links underlined, which is to be expected, but it also changes the color of links from blue to red when you hover over them with the mouse. Visited links are then displayed in purple.

Following is how you would alter the previous link style so that it appears in a different color when the user hovers over it with the mouse:

 a:hover {   background-color:gold;   font-weight:bold;   text-decoration:none; } 

Keep in mind that you can also change the appearance of a link when the link is active and after it has been visited. However, if you want a link to change its appearance only in response to a mouse hover, just set the a:active and a:visited style classes to match the a:link class.

Did you Know?

Here's a neat trick: If you make the color of a:visited the same as the background color of a page, links to pages that a visitor has already seen will become invisible. This can make your pages seem "smart"offering people only links to places they haven't been. On the other hand, some users may think quite the opposite of your page because they may wonder where the links went. So use this trick with caution.