HTML, XHTML, and CSS Bible, Fourth Edition

Chapter 33. Colors and Backgrounds

IN THIS CHAPTER

• Element colors

• Background images

The previous chapter covered the box formatting model of CSS. You learned how you can manipulate an element's containing box to better format your HTML documents. This chapter continues the discussion, covering element foreground and background colors, and the use of images for element backgrounds.

Element Colors

Most elements in an HTML document have two color properties, a foreground property and a background property. Both of these properties can be controlled using CSS styles. The following sections discuss both types of color properties.

Foreground colors

An element's foreground color is typically used on the visible portion of that element. In most cases, the visible foreground portion of an element is text, but there are instances where the foreground contains other, nontextual components. You can control the foreground color of an element using the CSS color property, which has the following format:

color:  <color_value>;

As with other properties that use color values, the value of the color property can be expressed using one of three methods:

• Predefined color keywords (such as blue, red, black, or green)

• Hexadecimal color values in #rrggbb form (#000000 for black, #FF0000 for red, #FF00FF for dark purple, and so on)

• An RGB value using the rgb() function (rgb(100%,0,0) or rgb(255,0,0) for red)

For example, the following style defines a class of the paragraph element, which will be rendered with a red ...