Color Attributes for body

< Day Day Up >

The body element has numerous attributes that you can use to affect the display of content in the body of the document including setting the background color, the color of text, and the color of links. One of the most commonly used body element attributes, bgcolor , defines the document's background color. Hexadecimal RGB values and color names can be used with bgcolor and the four attributes to follow. To create a white background, the attribute can be set to <body bgcolor="#FFFFFF"> (hexadecimal) or simply <body bgcolor="white"> . The text attribute of the body element defines the color of text in the entire document. The attribute takes a color in the form of either a hex code or color name . So <body bgcolor="white" text="green"> creates a white page with green text. Note that the text color can be overridden in the text by applying the font element to selected text with its color attribute, as discussed earlier in the chapter.

Aside from the body text, it is also possible to define the color of links by setting the body element attributes: link , alink , and vlink . The attribute link defines the color of unvisited links in a document. For example, if you've set your background color to black, it might be more useful to use a light link color instead of the standard blue. The alink attribute defines the color of the link as it is being clicked. This often happens too quickly to be noticed, but can create a flash effect, if desired. For a more subdued Web experience, it might be better to set the alink attribute to match either the link attribute or the next one, vlink . The vlink attribute defines the color of a link after it has been visited, which under many user agents is purple. Many authors wish to set the value of the vlink attribute to red, which makes sense given standard color interpretation. So you can create a white page with green text, red links, and fuchsia-colored visited links using the code presented here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>Colors</title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body bgcolor="#FFFFFF" text="#008000" link="#FF0000"   vlink="#FF00FF" alink="#FF0000">  Body content  <br />   <a href="#">Visited Link</a>   <a href="badlink">Unvisited Link</a>   </body>   </html>

Besides setting link state colors, it is possible to set hover colors for links. Although this does require the use of style sheets, it is presented here for completeness. To make the link rollover to a green color, you would use a style sheet like the following:

  <style type="text/css">  a:hover  {color: green;}   </style>

Of course, if you are going to style links with CSS it is probably best to style all states of the link in CSS as well. You can find more information on this in Chapter 10.

Using Color

Page designers should be forewarned not to choose link colors that can confuse their viewers . For example, reversing link colors so that visited links are blue and unvisited links are red could confuse a user. While it is unlikely that a page author would do such a thing, it has been done more than once ”particularly in situations where the look and feel is the driving force of the site. Page designers also run into trouble when they set all link values to blue with the belief that users will revisit sections thinking they haven't been there before. While this might make sense from a marketing standpoint, the frustration that results from lost navigation cues overrides any potential benefit from extra visits . Likewise, setting all the link colors to red could create similar trouble because users may think they have seen the site already.

Designers also must be extremely careful to preserve readability when setting text and background colors. Page designers often are tempted to use light colors on light backgrounds or dark colors on dark backgrounds. For example, a gray text on a black background might look cool, but will it look cool on every monitor? If a user's monitor and color settings are much different from your monitor, it will be unreadable. White and black always make a good pairing and red certainly is useful in small doses. The best combination, in terms of contrast, actually is yellow and black, but imagine the headache from reading a page that looks like a road sign. Despite the generally high contrast, designers should be careful of white text on a black background particularly when font sizes are very small or thin font faces are in use.

< Day Day Up >