HTML and CSS Reference
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 */
Defining page breaks within the printed output
always adds a
after the article
avoids adding page
breaks wit hin the
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.