CSS: The Missing Manual

Chapter 13. 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 Web sites while sitting at the dinner table, on a train, or lying on the grass in a park on a sunny day. 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. And complex CSS can make a page simply unprintable (see Figure 13-1).

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. 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 Web sites. 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 unique ...