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

This style sets the top and bottom padding space to 15 pixels, and the right and
left padding space to 0 pixels.

◗

3. Save your changes to the file and then reload cycle.htm in your Web browser.
Verify that additional space has been added above and below the horizontal navi-
gation list.

Dan has several style rules he wants you to apply to the elements within the presi-
dent's message. Complete the formatting of this page object by revising the cp_styles.css
style sheet fi le.

To format the headings in the president's message:

◗

1. Return to the cp_styles.css style sheet file in your text editor.
◗

2. Add the following style rule at the bottom of the file to display the h1 heading in
the president's message in a bold cursive-style font that is 158% of the size of the
default text, with 10-pixel margins above and to the left of the text content:

#president h1 {
font-family: 'Lucida Calligraphy', 'Apple Chancery', cursive;
font-size: 158%;
font-weight: bold;
margin: 10px 0px 0px 10px;
}

◗

3. Below that style rule, add the following style rule to display the h2 heading in the
president's message in a font size that is 105% of the size of the default text, with
a 10-pixel margin below the text and a 15-pixel margin to the left of the text:

#president h2 {
font-size: 105%;
margin: 0px 0px 10px 15px;
}
Figure 4-31 shows the new style rules.

Figure 4-31 Styling the h1 and h2 headings

sets the h1 heading to be
displayed in a bold cursive
font 158% of the size of the
default text with top and left
margins of 10 pixels

sets the h2 heading to be
displayed at 105% of the size
of the default text with a
bottom margin of 10 pixels
and a left margin of 15 pixels

◗ 4. Save your changes to the file.