Sams Teach Yourself CSS in 10 Minutes

Chapter 9. Styling a Round-Cornered Heading

In this lesson, you will learn how to wrap a round-cornered box around a heading. The box is made from two background images that adjust to suit any size heading.

Styling the Heading

To style this heading, you will need a selector that targets the <h2> element. To make sure you don’t target every <h2> on the page, you should also include a class within the selector. A class is used in this case instead of an ID because you might want to include more than one of these fixed-width headings on a single page (see Listing 9.1).

Example 9.1. CSS Code Showing the Selectors to Style the Heading

h2.decorative {...}
h2.decorative em {...}

The HTML code used for this heading is shown in Listing 9.2. Notice that the ...