HTML and CSS Reference
In-Depth Information
Setting Page Breaks
• To insert a page break before an element, use the style property
page-break-before:
type
;
where
type
is
always
to always place a page break,
avoid
to never place a page
break,
left
to force a page break where the succeeding page will be a left page,
right
to force a page break where the succeeding page will be a right page,
auto
to allow browsers to determine whether or not to insert a page break, or
inherit
to
inherit the page break style of the parent element.
• To insert a page break after an element, use the property
page-break-after:
type
;
where
type
has the same values as the
page-break-before
style.
• To apply a page break inside an element, use the property
page-break-inside:
type
;
where
type
is
auto
,
inherit
, or
avoid
.
Now that you've seen how to insert page breaks into printed output, you can insert a
manual page break into Kevin's document. Kevin wants the contents of the
article
ele-
ment to appear on the first page, and he wants a page break added directly after the article.
He also wants to prohibit browsers from inserting page breaks within the
article
ele-
ment. Now, you'll add style rules to the
print.css
style sheet to control these page breaks.
To control the placement of page breaks in the document:
◗
1.
At the bottom of the
print.css
style sheet, insert the following style rule as shown
in Figure 8-42:
/* Setting the page breaks in the document */
article {
display: block;
page-break-after: always;
page-break-inside: avoid;
}
figure 8-42
Defining page breaks within the printed output
always adds a
page break
after the article
element
avoids adding page
breaks wit
hin the
article element
◗
2.
Save your changes to the style sheet.
To complete the style sheet for printed output, you'll add style rules for the heading
and figure boxes. Kevin suggests that you increase the font size of the
h1
heading to
28 points and set the width of the photo to 4 inches, centering both on the page. You'll
add these styles to the style sheet now.
