Creating printer friendly pages using CSS

Today's sites excel at pleasing the eye, but unfortunately at the expense of the user's printer. The complex background, navigational bars, ads, and other "eye candy" aspects of the page waste both ink and paper when they're included in the printout. Using CSS2's support for the print media, we can rinse, trim and even do away with these redundant elements as the page is fed to the printer. Print media stylesheets are supported in IE5+, Firefox/ NS6+, and Opera 7+.

Here's an example of the print media in action:

<style type="text/css">
@media print{
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  #ad{ display:none;}
  #leftbar{ display:none;}
  #contentarea{ width:100%;}
}
</style>

The above CSS makes the page black (text) on white (background), removes the top banner and left navigational area, and expands the main content area to be 100% of the page's width when it's printed out. I've actually applied the above style sheet to this page, so to test things out, merely go to "Print Preview" in your browser (or if you want, "Print" the page).

• Tutorial Introduction (CSS Media types)
• Creating printer friendly pages using CSS