This talk will concentrate on print, but the words “paged media” in the title are meant as a reminder of two things:

1. CSS isn't just for screen or print display. Print is an example of a paged medium, but so are slide shows, such as this one.
2. There is a CSS module that is called “CSS Paged Media Module” and that contains some fundamental rules for print: page breaks, running headers and footers, page numbers…

Many people are using CSS and many others have heard about it. It is one of the most widely used technologies on the Web. About 2/3 of all HTML pages use CSS. CSS is also used for other document formats than HTML (mostly XML-based ones, such as SVG, XUL and XHTML) and it is used outside the Web as well.

Nevertheless, let's start with two quick slides to describe what CSS is and what it looks like (because, unlike most other technologies for the Web, a computer-readable file with CSS instructions is actually quite readable for humans, too).

CSS is a formal language for writing style sheets. It allows a designer to describe how a document should be displayed or printed: which fonts, colors, margins, justification, numbering style, etc.

The same style sheet can be used for several documents, but without a document, a style sheet does nothing. A style sheet must be applied to a document. The documents that CSS works for are structured documents of the type of HTML and many XML-based formats: a more or less hierarchically organized document with human readable text more or less in the right order and some images or other transcluded content.

B.t.w., the word “Cascading” in the name refers to the fact that several style sheets can be applied to the same document and there are rules for which one “wins” if some style rules are in conflict.

Indeed, not only the author (or designer) can add style sheets to a document, but the reader can add his own and thus override all or part of the the author's style.

h1 { color: red }
body { font: 10pt/1.2 Times, serif }
em { font-style: italic }
em em { font-style: normal }
div.sidebar { column-count: 2 }

①             ②        ③
selector,... { property: value;
               property: value;... }

The first rule corresponds to the illustration on the previous slide: the color red is assigned to all h1 elements.

Like all rules in CSS, it has three parts: the selector (h1) says to which elements this rule applies; the property (color) names a specific aspect of the style; and the value (red) assigns a value to the property.

The second shows how the font might be set for a printed page. (On screen, the font size of the body is typically not set, but left to the user. 'pt' units are also rarely used on screen.)

The third and fourth rules show how em elements are rendered in italic, but nested em elements in normal, roman, style. The second rule is more specific than the first, because it provides a context in which it matches, and therefore it overrides the first. This is an example of “cascading.”

The last rule shows a combination of an element name and a class attribute. The class attribute in HTML and in some other formats allow to specialize elements (“subclass” them). In this case the HTML element div has the style of a div, but also an extra rule to make its content display in two columns.

CSS level 3 is written as a set of about 30 modules. Each deals with an aspect of typography: fonts, colors, lists and numbering, page breaks, vertical text, etc. Most apply equally to different kind of (visual) media, although there are sometimes subtle differences in the meaning of properties when applied to print.

Some are expected to be used more often for print than for continuous (scrolling) media. Below we'll describe a handful of them.

Media queries can be seen as conditions that are attached to a style sheet or to a part of a style sheet. The style sheet is only used if the condition is fulfilled.

The conditions contain characteristics of the output medium, such as: the width or height must be in a certain range, there must be color, the page must be landscape, or the resolution must be above a certain number.

Media queries allow a designer to create multiple style sheets that are each optimized for specific types of environments. The renderer applies only the style sheet(s) that apply to its characteristics.

On the other hand, the 'size' property tells the renderer to try and make the page a certain size: it may cause the printer to select a different paper size, or if that is not possible, to scale the whole page down to fit.

E.g., for preparing the book that Håkon and I wrote (which was written completely in HTML) we used external programs in C and Perl to add the table of contents and index. Thus, the publication is a two step process:

1. The original (which is a complete HTML document, but without a table of contents or index) is processed by a program that copies the document unchanged, except that it adds a table of content and index.
2. That creates an intermediate version (also a complete HTML document, but this time with a table of contents and an index), which is then rendered by a CSS renderer and produces PDF.

It is currently unclear if such generated content will be handled by CSS or not. What is clear is that it currently has low priority.