@page

@page is a CSS at-rule used to select a page in paged media (for example, a book). It is usually used in conjunction with a selector to specify which pages in particular are to be selected.

There are three pseudo-class selectors that can be used with @page: :first, :left, and :right. As the names suggest, :first selects the first page, :left selects all left pages (in double-sided documents such as printed books), and :right selects all right pages.

The @page rule consists of the keyword “@page”, followed by an optional page selector (such as a pseudo-class selector), followed by a block containing declarations and at-rules. Comments and white space are allowed, but optional, between the “@page” token and the page selector and between the page selector and the block. The declarations in an @page rule are said to be in the page context. The page selector specifies for which pages the declarations apply. @page rules without a selector list apply to every page. Other @page rules apply to pages that match at least one of their selectors.

@page {
    /* pages styles */
}

/* select only the first page */
@page :first {
    /* style the first page */
}

/* select all left pages */
@page :left {
    /* styles for left pages */
}

/* select all right pages */
@page :right {
    /* styles for right pages */
}
                

The @page rule is used to specify styles for paged media, and therefore is usually used to specify or change certain styles of a document when it is to be printed.

With that said, it is important to note that you cannot change all CSS properties inside an @rule. Page margins are the most changed properties inside an @rule. All the margin properties (margin-top, margin-right, margin-bottom, margin-left, and margin) can be changed inside an @page rule. Here is a simple example which sets all page margins on all pages:

@page {
  margin: 3cm;
}
                

In addition to margins, you can style orphans, widows, and page breaks (see page-break-after, page-break-before, and page-break-inside) inside an @rule. Other properties will be ignored.

The page context has no notion of fonts, so em and ex units are not allowed. Percentage values on the margin properties are relative to the dimensions of the page; for left and right margins, they refer to the width of the page while for top and bottom margins, they refer to the height of the page. All other units associated with the respective CSS 2.1 properties are allowed (see the <length> entry for possible values).

Due to negative margins (either on the page or on elements) or absolute positioning, some content may end up outside the page, and therefore get “cut” — by the user agent, the printer, or ultimately, the paper cutter.