<body>
<H1>Padding around a Headline</H1>
</body>
</html>
The result of the style in this code is shown in Figure 6-11:
The background-colorproperty accepts the same color values as the fore-
ground colorproperty. By default, backgrounds are transparent, so any tex-
tures, images, or other elements that are on the bottom show through. Also,
you can give a background color to almost any element — from inline em ele-
ments all the way up to the entire bodyelement.
Try to avoid lurid color combinations. Some Web page designers are tempted
to create “special effects” by using loud, some would even say vulgar, color
patches on their pages. Unless you have a very good reason to do this, you
should avoid the haphazard, childish appearance of a page splattered with
various zones of color. Here’s an example of what I mean. This page has a
blue background, with lavender, orange, hot pink and other bizarre color
combinations. Not only are such pages difficult to read; they’re usually just
simply ugly as well, as you can see in Figure 6-12.
<html>
<head>
<style>
body {background-color: DodgerBlue;}
i {background-color: OliveDrab; color: orange;}
p {background-color: lavender; color: HotPink;}
</style>
Figure 6-11:
Padding
expands this
background
color
around this
element.
124 Part II: Looking Good with CSS
