Preventing portions of a webpage from printing

A colleague asked me about my solution for this just the other day, here’s the quick solution.

  1. Add a CSS class attribute to the items.  Assuming they are <div>’s for header and footer, they would look like my example below, but you can add the ‘no-print’ class to anything you don’t want printed.
  2. Add a stylesheet with media=”print” to change the visibility and/or display attributes of that class.
  3. With a little more work, you could add a ‘no-screen’ solution too… this would be advantageous in cases where you may need to mask an account number or SSN.

<html>
<head>
<title>Example</title>
<link media=”print” href=”print.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div class=”no-print”>This is your header</div>
<div>this is the body</div>
<div class=”no-print”>this is your footer</div>
</body>
</html>

print.css could then contain:

.no-print { display:none; }

Cheers!