home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeWeb Design in a NutshellSearch this book

11.4. Affecting the Appearance of Links

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.

11.4.3. Setting Global Link Colors with Style Sheets

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.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.