Section 13.1. How Media Style Sheets Work | Dreamweaver CS3: The Missing Manual

13.1. 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 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 ten 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 applies 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 .

Figure 13-1. Sometimes a Web page won't print correctly. When viewed in the Firefox Web browser, a page from CNET.com looks great (top). When you preview the printed version, though, you end up with an unreadable mess (bottom).

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.)
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.

Note: The Opera Web browser understands the projection media type when it's in Full Screen mode. For a tutorial on this cool feature, visit www.opera.com/support/tutorials/operashow/.

One approach is to build styles with your monitor in mind first, and 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 printer-only 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 in Section 13.3. Alternatively, you can create two different media style sheetsone for screen and the other for printand attach them to your Web pages, as described next .