Enhancing a Web Site with Advanced CSS - HTML, CSS, and Dynamic HTML - page 602

To format the contents of the first page:

◗

1. At the bottom of the style sheet, insert the following style rule for the h1 heading:

/* Styles for the h1 heading */

h1 {
font-size: 28pt;
text-align: center;
width: 100%;
}

◗

2. Next, insert the following style rule for the main photo:

/* Styles for the main photo */

#photo1 {
display: block;
margin: 0in auto;
width: 4in;
}

Figure 8-43 highlights the new style rules in the file.

figure 8-43 styles for the h1 heading and main photo

expresses font siz es
in points, not pixels

uses inches to define
the margin and
width of the photo

◗

3. Save your changes to the file.

Finally, Kevin wants each figure box to appear on its own page. As with the article
element, you'll add a page break after each figure element and instruct browsers to
avoid placing page breaks within each figure box. You'll also create style rules to set the
width of each figure box image and the font size of each caption.

To create styles for the figure boxes:

◗

1. At the bottom of the style sheet, add the following style rule to place each figure
box on its own page:

/* Styles for the figure boxes */

figure {
display: block;
text-align: center;
page-break-after: always;
page-break-inside: avoid;
}