Section 7.4. Coloring the Background


7.4. Coloring the Background

It's a cinch to add a background to an entire page, an individual headline, or any other page element. Use the background- color property followed by any of the valid color choices described in Section 6.1.2. If you want, add a shockingly bright green to the background of a page with this line of code:

 body { background-color: #6DDA3F; } 

Alternatively, you can create a class style named, say, .review with the background-color property defined, and then apply the class to the body tag in the HTML, like so: <body class="review"> .


Note: You can also place an image in the background of a page and control that image's placement in many different ways. You'll explore that in the next chapter.

Background colors come in handy for creating many different visual effects. You can create a bold-looking headline by setting its background to a dark color and its text to a light color. (You'll see an example of this "reverse type" effect in the tutorial in Section 7.7.3.) Background colors are also a great way to set off part of a page like a navigation bar, banner, or sidebar.


Tip: When you use background colors and borders, keep the following in mind: If the border style is either dotted or dashed (see Figure 7-7), the background color shows in the empty spaces between the dots or dashes. In other words, Web browsers actually paint the background color under the borderline.


CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

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