Styling the em Element

Styling the <em> Element

The <em> element will be used to house the second background imagethe bottom of the round-cornered box. This means it must be given the same width as the <h2> element in order for the two images to line up properly.

However, because the <em> is an inline element, it will ignore any width that is specified. The solution is to set it to display: block; before applying a width.

Next, padding-bottom is used to move the text up slightly so it doesn't sit hard against the background image.

You can also override the <em> element's default italic style using font-style: normal;.

Finally, you need to apply the background image using the background property. The image should be set to no-repeat so it does not reappear under the heading. The background position should be set to 0 100% so the lower-left corner of the image will align with the lower-left corner of the element's edge.

The image is shown in Figure 9.4 and the CSS code is shown in Listing 9.5. The completed heading is shown in Figure 9.5.

Figure 9.4. Screenshot of the second imagewhich is applied to the <em> element.

Listing 9.5. CSS Code Styling the <em> Element

h1#header {     color: #036;     font: bold 100% arial, helvetica, sans-serif;     text-align: center;     background: url(chapter9.gif) no-repeat;     width: 220px;     padding: 5px 0 0 0; } h2.decorative em {     display: block;     width: 220px;     padding: 0 0 5px 0;     font-style: normal;     background: url(chapter9a.gif) no-repeat 0 100%; } 

Figure 9.5. Screenshot of the final heading.