CSS @page rule

Topic: CSS3 Properties ReferencePrev|Next

Description

The @page rule defines the dimensions, orientation, and margins of a page box in a styleSheet, which are used for print previewing and printing Web documents from the browser. Generally, within this construct various CSS properties like size, page, and margin are used to specify the dimensions, orientation, margins, etc. of the page box.

The page box is a rectangular region that contains two areas:

• The page area. The page area includes the boxes laid out on that page. The edges of the first page area establish the rectangle that is the initial containing block of the document. The canvas background is painted within and covers the page area.
• The margin area, which surrounds the page area. The page margin area is transparent.

Syntax

The syntax of this at-rule is given with:

The example below shows the @page property in action.

@page {
    margin: 2in;    /* default for all pages */
}
@page :left {
    margin: 1in;    /* margin on left page */
}
@page :right {
    margin: 3in;    /* margin on right page */
}
@page :first {
    margin-top: 5in;    /* top margin on first page */
}

Browser Compatibility

The @page rule is poorly supported.

Basic Support— Firefox (None) Google Chrome 2+ Internet Explorer 8+ Apple Safari 5+ Opera 6+

Further Reading

See tutorial on: CSS Media Types.