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.

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.