Countless Web sites allow you to access "printer friendly" versions of their pages with a simple click. However, these pages are usually generated using some complex voodoo on a Web server. But there's an easier way to make your Web pages printer friendly.
Technologies like the Web are supposed to make us paperless. But that's not the case at all. If anything, people print Web pages almost as often as they read them on screen. Why? Most people find the heft of paper comforting. In fact, several people have told me that a document isn't "real" if they can't hold it in their hands.
In many cases, printed Web pages look like ... well, printed Web pages. There's a lot of superfluous content in the printout. Depending on the page, that could include navigation bars, ads, icons, and other junk. On top of that, the text on many a Web page gets cut off in a print out.
Enter CSS
Countless Web sites allow you to access "printer friendly" versions of their pages by clicking an icon. However, these pages are usually generated using some voodoo on the Web server. But there's an easier way to create printer-friendly Web pages. You use something called Cascading Style Sheets.
Among other things, the Cascading Style Sheets, Level 2 specification defines how to target some or all of a Web page to a particular output device -- media in CSS-speak. One of those media is a printer. Using CSS, you can reformat your Web pages for printing. And if you've coded those pages properly, the process of styling for print is easy.
Let's Get Styling!
Before you start coding your print styles, you should decide how you're going to put those styles into a CSS file. There are two ways you can put CSS printing styles into a file:
• Combine screen and print styles in one file
• Have separate CSS files for screen and print styles
How you combine or separate styles will affect how you link your stylesheet to your Web pages (this is discussed later in the article). If you plan to combine your screen and print styles in a global CSS file, you must create a section for each set of styles. Set up the screen styles section like this:
@media screen { }
Set up the print styles section like this:
@media print { }
The @media elements are the way that CSS tells a browser when and where to apply formatting. You simply put your style definitions for each media between the curly braces.
Your Web pages will most likely be made up of a number of common HTML elements. This article discusses how to style the following elements for print:
• <body>
• <h1<, <h2< and <h3>
Note: You're not limited to styling the above HTML elements. Feel free to experiment with styling lists, tables, images, font elements (like <code< and <em<), etc. for print.