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

The sidebar consists of h1 and h2 headings and paragraphs that describe each ride.
You'll style these elements now.

To format the sidebar content:

◗

1. Return to the cp_styles.css file in your text editor. At the bottom of the file, insert
the following style rules for the h1 , h2 , and p elements in the aside element:

aside h1 {
font-size: 105%;
font-weight: bold;
margin-bottom: 25px;
text-align: center;
}

aside h2 {
font-size: 85%;
font-weight: bold;
}

aside p {
font-size: 75%;
margin: 15px;
}
Figure 4-66 highlights and describes the new style rules.

Figure 4-66 Formatting the sidebar elements

displays the h1 heading
in bold and 105% of the
size of the default text;
centers the heading and
increases the bottom
margin to 25 pixels displays the h2

headi ngs in bold
and 85% of the size
of the default text

displays paragraphs at
75% of the size of the
default text with a
15-pixel margin

◗

2. Save your changes to the file and then reload cycle.htm in your Web browser.
Figure 4-67 shows part of the formatted aside element.

Figure 4-67 Formatted sidebar