Styling the 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).

Listing 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 heading is wrapped inside an <em> (emphasis) element. This additional element will be important later in the lesson.

Listing 9.2. HTML Code Containing the Markup for a Heading

<h2 class="decorative">
    <em>Section Heading</em>
</h2>

Creating the Scaleable Background Image The heading in this lesson will eventually be wrapped inside a round-cornered box. This box must be able to grow downward if the heading text is long, or if the user has chosen to use larger font sizes within her browser. For this reason, the round-cornered box is made up of two background images. The first image is the top section of the box, and the second image is the bottom section of the box. The first image must be very long, in order to grow downward as needed. If the first background image is applied to the <h2> element, the second background image must be applied to another element. One simple option is to wrap the heading text in an <em> element and apply the second image to this. As long as the second image is positioned at the bottom of the <em> element, the content can grow as needed.