CSS: The Missing Manual

Tutorial: Building a Print Style Sheet

In this tutorial, you'll create a print style sheet. To make the printed version of a Web page look better, you'll add styles that remove unwanted page elements and backgrounds, change text formatting, add a printable logo, and print the URLs attached to any links on the page.

To get started, download the tutorial files from this book's companion Web site at http://www.sawmac.com/css/. Click the tutorial link, and then download the files. All of the files are in a ZIP archive, so you need to unzip them first (You'll find detailed instructions on the Web site.) The files for this tutorial are in the chapter_13 folder.

Remove Unneeded Page Elements

To get started, you first need to understand how the page is laid out so you can decide which elements you want printed.

1. Launch a Web browser and open chapter_13 → cosmo.html .

   This CosmoFarmer Web page is a float-based layout consisting of several <div> tags (see Figure 13-4). In all likelihood, anyone printing this page is most interested in the main content—the Bathtub Hydroponics story. Printing the Subscribe and Contact links, the navigation bar, and the news links is just a waste of toner, so your print style sheet should hide these parts of the page.

2. In a text editor, create a new file named print.css and save it in the chapter_13 folder.

   In your new print style sheet, the first order of business is to hide the navigation bar and other parts of the page that you don't want to print.

3. Using the ...