CSS3 Paged & GCPM

CSS3 Paged Media & GCPM

Cascading Style Sheets (CSS) is a widely used style sheet language for the web. By encoding presentational information in a style sheet, the document language (typically HTML or XML) can remain device-independent. CSS3 is a family of specifications that, among other things, extend support for paged media so that CSS can be used for professional printing. This sample document demonstrates functionality which has been implemented by twice or more.

Table of contents

Margin boxes

Margin boxes allow running headers and page numbers to be displayed outside the page area. In this document page numbers are displayed at the bottom of all pages, and a running header is displayed on page 2 and 4.

Page numbers

Page numbers are essential referenced in paged media and this document displays the page number, along with the total numbe og pages, at the bottom of page 1, 2, and 4. This functionality depends on two special counters in CSS3: page and pages.

Headers and footers

Printed documents often have page headers and footers. For example, page numbers are often printed at the bottom of the page, and the document title is shown at the top – except on title pages. CSS3 includes functionality to copy the text of elements into headers and footers, as well as moving elements into headers and footers.

Running elements

CSS is not a transformation language. However, the presentation of information sometimes necessitates transformation-like behavior. Named flows makes it possible to flow elements to other places in the document. For example, all images can be flowed to the end. Named flows are similar to footnotes, except that named flows are anchored in the structure of the document rather than the page.


FootnotesA footnote is a note placed at the bottom of a page of a book or manuscript that comments on or cites a reference for a designated part of the text. are essential in printed documents and CSS3 knows how to generate them. Unlike what some people think, footnotes are not the place to put information you don't want to see.Often, the most interesting information is found in the footnotes. In CSS3, the footnote area is at the bottom of the page by default, but can also be put in other places.


Leaders consist of dots or dashes in a row leading the eye across a page. For example, the Table of contents has leaders in it. The leaders are not found in the document itself, but rather in the style sheet.


The web is built on hyperlinks. On screen, hyperlinks are clickable. In print, it's better to use page numbers. Cross-references have been used to generate the page numbers in the Table of contents on this page.

Spanning columns

The document title and the subsequent first paragraph span all (i.e., both) columns of this document.


Bookmarks, for example those used in PDF documents, can be specified in CSS3. For example, it's common that headings are represented in the bookmarks to ease navigation in large documents. To see the bookmarks, open the PDF document in a PDF viewer.

Page floats

The image at the top of this column is floated there by way of the 'float' property. Introduced in CSS1 to allow elements to float to the left and right, CSS3 adds a few more values to it. The result may be elements floating to the top, bottom, and corners of a page or a column.

Crop and cross marks

In printing, crop marks are used to indicate where the printed paper should be cut. Cross marks are used to align prints of different colors to improve color reproduction. These marks were part of CSS2 but dropped in CSS 2.1 due to lack of implementation experience. CSS3 makes room for them again.

Bleed area

The bleed area extends slightly outside the page box so that the printed color is sure to cover the whole page. In this document, the gray background color is visible beyond the area marked by the crop marks.

CMYK colors

This paragraph is set to a blueish color using CMYK color values.

Styling blank pages

Blank pages can be styled. In this document, page 3 is intentionally left blank and the user is informed of this in the top center margin box.

The very last page is only here to ensure there is a blank page before it.