CSS Based Printing Tip

comments edit

This is a follow up tip to my post on Implementing CSS Based Printing.

One technique that served me well on a project recently was to implement a very simple print.css for the print stylesheet. In fact, it looks like this:

    display: none;

Make sure you declare the stylesheet properly:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

And now simply add the css class noprint to any elements in your HTML you do not want printed as in the simple example below.

<div id="main">
   <div id="header" class="noprint"></div>
   <div id="sidebar" class="cool noprint"></div>
   <div id="content"></div>
   <div id="footer" class="noprint"></div>

This is useful especially when retrofitting a complicated html page to use CSS based printing.