In this sample design, you will transform an existing web document (as shown in Figure 10-7) to make it more suitable for print.
Although CSS has changed the way we design for the Web, it also has allowed developers to change the way they provide printer-friendly versions of their documents. Instead of having to create separate pages or write scripts, you can use CSS to create a printer-friendly document as soon as the user clicks the Print button. The HTML for the page isn’t in the book because the miracle of CSS lets us change the presentation without having to change the HTML.
Figure 10-7. Web page stylized for screen delivery
When creating a stylesheet for print, you actually use a web browser. This enables you to quickly see how the CSS rules affect the display of the document (just like for media delivery), but it’s also easier on the environment and you save money by not wasting ink in the printer. So, comment out the stylesheet used for the screen to create new CSS rules:
<!-- Hide screen media CSS while working on print CSS --> <!-- link href="adv.css" type="text/css" rel="stylesheet" media="screen" --> <style type="text/css"> /* Print CSS rules go here */ </style>
Apply the first CSS rule to the
body element. In this rule, set the background color to white and set the type to black: ...