Because all of the screen-specific style information is already contained in the original HTML, all I need to do is to place the styles within an@media screen rule. This rule tells the browser to use these styles when displaying the page on a computer monitor, as shown in Listing B. Formatting for a printer
To make the original HTML more printer-friendly, I need to create an @media print rule within the same style sheet. Then, I'll create printer-specific styles to make the page display properly when printed. First, I'll change the way the header bar will be rendered. The original page uses white text on a dark background. I'll change the text to black and remove the background colour altogether. Then, I'll place a 1-pixel gray border around the header bar to maintain its definition. These changes will require less ink and will ensure that the text is visible to users who don't have their printers set to print background colors. I'll also change the font size from pixels to points, which is a standard unit for printing. You can see the code in Listing C. Now, I'll change the font size of the body text from pixels to points, as shown in Listing D. I'll remove the large advertisement from the body of the page by setting the .ad style's display attribute to none (Listing E). This will hide the ad and allow the text expand to all the way to the right margin. Finally, I'll remove the toolbar that displays the email, save, and discuss options, since these items are not applicable to the printed version of the page. The final style sheet should now look like Listing F. Testing on your target devices
The great thing about this example is that it is easy to test. Simply open the final HTML page in your browser and select File | Print Preview. The Print Preview should display the page using the @media print rule specified in the style sheet, as shown in Figure B. Figure B
