CSS3: The Missing Manual, 3rd Edition

Chapter 16. CSS for the Printed Page

Believe it or not, sometimes people will want to see your web pages on paper. People who make a purchase on your site may want to print out a receipt, for example. If you have a cooking site, you’ll certainly want to let your guests print their favorite recipes on paper or index cards for use in the kitchen. Even if your website consists of mostly text articles intended to be read online, some visitors will want to print a hard copy for a class project or archiving. So what becomes of your carefully crafted designs when the ink hits the paper? White text on a black background can waste gallons of toner, and some browsers may not even print the background. Do visitors really need to see your site’s navigation bar on the printed page? Probably not.

Web designers used to solve this dilemma by creating separate printer-friendly versions of their sites—essentially creating a duplicate site formatted just for printing. Not only is that a lot more work than building one version of the site, it also means changing multiple files each time a page needs editing. Fortunately, CSS offers a better way—the ability to make a page look one way when displayed on a screen and a different way when printed (see Figure 16-1). The secret? Media style sheets.

How Media Style Sheets Work

The creators of CSS were pretty thorough when they envisioned all the different ways people might view websites. They knew while most people view the Web using a computer and monitor, ...