In order to access this site you need to enable JavaScript!

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;
}

Copy Code

Syntax Highlighter

Did you find this example helpful? yes no

    /* Sets margins for right pages. */
@page :right {
    margin-left: 2cm;
    margin-right: 3cm;
}

Copy Code

Syntax Highlighter

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;
}

Copy Code

Syntax Highlighter

Did you find this example helpful? yes no

External links:

MSDN
Mozilla
W3C CSS 2.

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

@page rule

Syntax:

Pseudo classes:

Available style properties within the @page rule:

Examples:

External links:

Post Content