@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. 1n6b27

There are three pseudo-class selectors that can be used with @page: :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) 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 page-break-inside) inside an @rule. Other properties will be ignored.

The page context has no notion of fonts, so <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 agent, the printer, or ultimately, the paper cutter.

@page :pseudo-selector {
    /* margins, widows, orphans, and/or page break styles */
}
                

@page {
  margin: 1.5in;
}
                

@page :left {
    margin: 1in;
    margin-left: 1.5in;
    orphans: 3;
}