Pages can be styled using @page rules, which by default apply to every page in the document. It is also possible to apply style to specific pages using page selectors.
The :first page selector
The :first page selector can be used to style the first page of the document differently from the rest of the document.
CSS
@page {
@top { content: "Prince User Guide" }
@bottom-right { content: counter(page) }
}
@page:first {
@top { content: normal }
@bottom-right { content: normal }
}
The @page:first rule sets the content of the top and bottom-right margin boxes back to normal, so that no page header or footer will be shown on the first page.
The :left and :right page selectors
The :left and :right page selectors can be used to style left-facing and right-facing pages differently to create duplex layouts.
CSS
@page:left {
@top { content: string(book-title) }
}
@page:right {
@top { content: string(chapter-title) }
}
h1 { string-set: book-title content() }
h2 { string-set: chapter-title content() }
These rules place the book title in the header of left-facing pages, while the title of the current chapter is placed in the header of right-facing pages. (The book title is copied from the text content of the h1 element while the chapter title is copied from the text content of the h2 element).
Named pages
Named pages are used to control the style of the page that particular elements appear on. This can be used to apply different page headers and footers, change the style of the page numbers and introduce landscape pages for large figures or tables.
The pages that an element appears on are named using the page property, which may be applied to any block-level element within a non-floating element in the normal flow.
CSS
@page big_table {
size: A4 landscape
}
table.big { page: big_table }
The rule for the table element (with class "big") names the pages that it appears on as "big_table". The @page rule for "big_table" pages sets the page size to landscape A4.