HTML and CSS Reference
In-Depth Information
A page box does not support all of the measurement units you've used with the other
elements. For example, pages do not support the em or ex measurement units. In gen-
eral, you should use measurement units that are appropriate to the dimensions of your
page, such as inches or centimeters.
To fit your Web docu-
ment to a printed page,
use absolute units such as
inches and centimeters.
Do not use pixels or rela-
tive units.
Page Pseudo-Classes
If a Web page covers several printed pages, you might want to define different styles for
different pages. You can do this with pseudo-classes that reference specific pages. The
syntax to reference a page pseudo-class uses the rule
@page:
pseudo-class
{
styles
}
where
pseudo-class
is
first
for the first page of the printout,
left
for the pages that
appear on the left in double-sided printouts, or
right
for pages that appear on the right
in double-sided printouts.
For example, if you are printing on both sides of the paper, you might want to create
mirror images of the margins for the left and right pages of the printout. The following
styles result in pages in which the inner margin is set to 5 centimeters and the outer mar-
gin is set to 2 centimeters:
@page:left {margin: 3cm 5cm 3cm 2cm;}
@page:right {margin: 3cm 2cm 3cm 5cm;}
@
rules such as the
@page
rule should be placed at
the top of a style sheet,
before the style rules that
define the appearance of
specific page elements.
Page Names and the Page Property
To define styles for pages other than the first, left, or right, you first must create a
page
name
for those styles as follows
@page name {styles}
where
name
is the label assigned to the page style. The following code defines a page
style named
large_margins
used for pages in which the page margin is set at 10 centime-
ters on each side:
@page large_margins {margin: 10cm}
Once you define a page name, you can apply it to any grouping element in your
document. The content of the element will appear on its own page, with the browser
automatically inserting page breaks before and after the element if required. To assign a
page name to an element, you use the
page
property
selector
{
page:
name
;
}
where
selector
identifies the element that will be displayed on the page, and
name
is
the name of a defined page. For example, the style
blockquote {
page: large_margins;
}
causes all block quotes to be displayed on their own separate pages using the styles
defined for the large_margins page.
