Introduction to CSS for Paged Media

Tony Graham

Antenna House, Inc.


CSS can be used for making pages as well as for styling websites. Many people are familiar with CSS in the browser: some are very familiar, but others, not so much. Fewer people, however, are as familiar with using CSS for paged media.

This paper introduces some of the key features of CSS for paged media, including: differences between screen and paged media; sizing and selecting pages; headers and footers; PDF output and PDF accessibility features; printing colour; and numbering pages. This material is adapted from a more comprehensive tutorial that is available online [20].

Table of Contents

Web and Paged Media
@media Rule
Specifying a Print Style Sheet
<style> Element
@import Rule
Media attribute of <style> and <link> elements
Differences Between Screen and Paged Media
Design approach
Left and right pages
The printed book
Page Setting
Western Page Design
Japanese Page Design
@page Rule
Named Page : page property
Crop and Registration Marks
Page bleed area
Headers and Footers
Margin Boxes
Running Headers and Page Numbers
Running header setting : string-set property and string() function
Variable strings : string-set property
Move elements to header/footer : running() position value
Insert a running element: element()
Page number : counter(page)
Total pages : counter(pages)
Left and Right Page Headers: :left and :right
Last and only pages: :last and :only
PDF Output
PDF versions
Tagged PDF
Matterhorn Protocol
PAC 3 PDF/UA checker
Document properties
Extensible Metadata Platform (XMP)
Colour Specification
Printing colour
Text Colour : color property
CMYK colours
PANTONE® spot colours
Other spot colours
Numbering Chapters and Sections
Inserting Characters : content property
Incrementing Counters : counter-increment property
Counter Reset : counter-reset property
Page counter
Counter styles
Defining Custom Counter Styles : @counter-style rule
Predefined Counter Styles