Block Web Page Printing

Use CSS to Prevent Your Pages from Being Printed

It's easy to use CSS to prevent people from printing your Web pages. You simply need to create a 1 line stylesheet named print.css that says:

body { display: none; }

Then load that stylesheet as a print stylesheet:

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

The important part is indicated in bold - this is a print stylesheet. It tells the browser that if this Web page is set to print, switch the body to display nothing.

Then, all that will print will be the standard header and/or footer that the browser appends to printed pages.

Block One Page at a Time

If you don't need to block a lot of pages on your site, you can block printing on a page-by-page basis with the following styles pasted into the head of your HTML:

<style type="text/css"> @media print { body { display:none } } </style>

Get Fancier with Your Blocked Pages

But what if you want to block printing, but don't want your customers too frustrated? You can get a little fancier and put in a message that will only display when your readers print the page - replacing the other content. To do this, build your standard Web page, and at the top of the page, right after the body tag, put:

<div id="noprint">

And close that tag after all your content is written, at the very bottom of the page:

</div>

Then, after you've closed the "noprint" div, open another div with the message you want to display when the document is printed:

<div id="print">
 <p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p>
 </div> 

Include a link to your print CSS document named print.css:

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

And in that document include the following styles:

#noprint { display: none; }
 #print { display: block; }

Finally, in your standard stylesheet (or in an internal style in your document head), write:

#print { display: none; }
 #noprint { display: block; }

This will insure that the print message only appears on the printed page, while the Web page only appears on the online page.

Test it Out

This sample document should print a blank page when you try to print it. Please note, there are ways to get around this functionality - this is not intended as an absolute prevention of printing Web pages.