# Controlling Pagination with CSS

CSSWeb DevelopmentFront End Technology

To control pagination, use the page-break-before, page-break-after, and page-break-inside properties.

Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.

The keyword auto is the default; it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.

Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content.

## Example

You can achieve this using the following rule

<style>
<!--
h1 {
page-break-before : right
}
h2 {
page-break-after : avoid
}
-->
</style>
Published on 27-Apr-2018 11:37:40