This article originally appeared on Builder.com.

As a reader of this or any other media Web site, you are undoubtedly familiar with the printer-friendly page, such as this one. It is a version of an article that is free of most graphics, background colors, and advertisements. In most cases, the printer-friendly page is a separate file that requires a trip to the Web server to retrieve.

I’m going to share an example that demonstrates how to use Cascading Style Sheets (CSS) media types to format a single HTML file for both the screen and a printer.

Media types explained
The @media rule in CSS allows me to assign specific styles based on the type of device the page will be displayed on. There is no need to create separate HTML files for each device, only separate @media rules within a single CSS file. There is also no need to make a separate request from the Web server, since the switch between media types is done on the client side.

Some of the supported devices under CSS include computer screens, printers, televisions, handhelds, speech synthesizers, and Braille tactile feedback devices. Currently, however, the major browsers support only a small number of the available media types. Internet Explorer 4.5+ and Netscape 4.7+ support screen and print, while Opera 3.67+ supports screen, print, and projector.

The HTML file
The first step is to open an existing HTML page. Figure A shows a screenshot of the printer-unfriendly page I will use in this example. Listing A provides the code. Notice that the style information is presented inline for the sake of demonstration.

Figure A
A printer-unfriendly page

Formatting for the screen
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 color 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 e-mail, 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
Printer-friendly page in Print Preview