CSS: The Missing Manual, 2nd Edition

Chapter 14. CSS for the Printed Page

Not everyone likes to sit in front of a computer and read. More and more, web surfers are printing out pages for offline reading. Plenty of folks enjoy websites while sitting at the dinner table, on a train, or lying on the grass in a park on a sunny day. Printing out a receipt after making an online purchase is common as well. 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 14-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, sometimes people want to print out a page. In addition, new web surfing devices like mobile phones, handhelds, and televisions have their own ...