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.
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 unique requirements when it comes to web design.
To accommodate these different methods of surfing, CSS lets you create styles and style sheets that specifically target a particular media type. CSS recognizes 10 different media types: all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv. The browser applies the style sheet only when that media type is active. In other words, the browser can apply one style sheet for the screen and a different one when printing. Many of these media types are for very specialized applications like a Braille reader for the blind, a speech reader (for those who want or need to hear a page in spoken form), or a teletype machine. Most of these types don't yet work in the real world, as there are no devices programmed to understand them. You should be aware, however, of three: all, screen, and print.
All applies to every type of device. When a style or style sheet applies to all media types, every device accessing the page uses those same styles. Printers and monitors alike attempt to format the page the same way. (Styles actually work this way already when you embed them in the page or link them from an external style sheet, so you don't need to specify "all media types" when adding a style sheet to a page.)
Screen styles display only on a monitor. When you specify the screen media type, the browser ignores those styles when it prints the page. This media type lets you isolate styles that look good on screen but awful on paper, like white text on a black background.
Print styles apply only when the page is printed. Print styles let you create styles that use printer-friendly font sizes, colors, graphics, and so on.
One approach is to build styles with your monitor in mind first, and then attach them using one of the methods described below (methods like internal or external, linked or imported). At the outset, these styles work for both the monitor and the printer. Then, you create a style sheet that applies only when printing. It overrides any of the main styles that negatively affect the look of the page when printed. You'll learn this technique starting on Creating Print Style Sheets. Alternatively, you can create two different media style sheets—one for screen and the other for print—and attach them to your web pages, as described next.
Tip
Another popular technique is to create three style sheets: one for the printer, one for the screen, and a third with styles that should appear both on a monitor and when printed. You specify the media types for the printer and screen style sheets and attach the third, shared set of styles as you would normally (see Specifying the Media Type for an External Style Sheet).
Figure 14-1. Using a printer style sheet can save paper, ink, and frustration by letting visitors print just the information they're after and leave unneeded extras on the monitor. In this example, a page from the great web development site, A List Apart, looks nice onscreen (top) and simple, clean, and informative when printed (bottom). Notice how the printed version expands to fill the entire width of the page and leaves off logo, navigation, and ads.