You are here: Reference > CSS > at-rules > page

@page rule

Browser support:
8
Allows to define attributes for the page in paged media, such as print previews and printed pages.
Note: The @page rule is supported in Internet Explorer from version 8.
The @page rule specifies the margins and dimensions of the printed pages.
In Javascript, the cssRules collection contains the CSS rules of a style sheet, and the CSSPageRule object represents a @page rule. The cssRules collection does not contain the @page rules in Firefox and Safari before version 5, and it is not supported in Internet Explorer before version 9. If you want to get the @page rules in older Internet Explorer versions, use the pages collection. There is no way to access to a @page rule in Firefox and in older versions of Safari.

Syntax:

@page [pageSelector][pseudoClass] {
rules
}
pageSelector - Optional. Selector to specific pages. Not supported in Internet Explorer.
pseudoClass - Optional. A page pseudo.
rules - Style rules.

Pseudo classes:

:first Specifies that the rules apply to the first page.
:left Specifies that the rules apply to left pages.
:right Specifies that the rules apply to right pages.

Available style properties within the @page rule:

margin Specifies all four margins of the page box.
margin-bottom Specifies the bottom margin of the page box.
margin-left Specifies the left margin of the page box.
margin-right Specifies the right margin of the page box.
margin-top Specifies the top margin of the page box.
marks Specifies the size and orientation of the page box. No current browser supports it.
size Specifies whether cross marks or crop marks or both should be rendered outside the page box. Only Opera implemented it (buggily).

Examples:

    /* Sets all margins to 3cm. */
@page {
    margin: 3cm;
}
Did you find this example helpful? yes no


    /* Sets margins for right pages. */
@page :right {
    margin-left: 2cm;
    margin-right: 3cm;
}
Did you find this example helpful? yes no


    /* 
        This page rule is not supported in Internet Explorer,
        because it uses a page selector (myPage).
    */
@page myPage:right {
    margin-left: 2cm;
    margin-right: 3cm;
}
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content