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.
Search WWH ::

Custom Search