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 sitesessentially 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 waythe ability to make a page look one way when displayed on a screen and a different way when printed. The secret? Media style sheets.