Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 276

To format the article heading:

◗

1. Return to the cp_styles.css file in your text editor. Directly below the style rule for
the story article selector, insert the following rules to format the size, back-
ground, and text of the article heading group:

#story article hgroup {
background: rgb(97, 30, 2) url(rawlings.png) bottom right
no-repeat;

-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;

color: rgb(145, 98, 78);
color: rgba(255, 255, 255, 0.3);

height: 90px;
text-indent: 10px;
}

◗

2. Set the size of the h1 heading in the article to 158% of the default font size, and
set the kerning to 3 pixels by adding the following rule directly below the rule you
created in Step 1:

#story article hgroup h1 {
font-size: 158%;
letter-spacing: 3px;
}

◗

3. Finally, set the size of the h2 headings to 105% of the default font size by adding
the following style rule directly below the rule you created in Step 2:

#story article hgroup h2 {
font-size: 105%;
}
Figure 4-50 shows the newly added style rules.