How to Block a Web Page From Printing With CSS

Web pages are meant to be viewed on a screen. While there are a wide variety of possible devices that can be used to view a site (desktops, laptops, tablets, phones, wearables, TVs, etc.), they all include a screen of some kind. There is another way someone may view your website, a way that does not include a screen. We are referring to a physical printout of your web pages.

Years ago, you would find that people printing websites were a pretty common scenario. We remember meeting with many clients who were new to the web and felt more comfortable reviewing printed pages of the site. They then gave us feedback and edits on those pieces of paper instead of looking at the screen to discuss the website. As people have become more comfortable with the screens in their lives, and as those screens have multiplied many times over, we have seen fewer and fewer people trying to print web pages to paper, but it does still happen. You may want to consider this phenomenon when you plan out your website. Do you want people to print your web pages? Maybe you do not. If that's the case, you have some options.

How to Block a Web Page From Printing With CSS

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 includes the following line of CSS.

body { display: none; }

This one style will turn the "body" element of your pages to being not displayed — and since everything on your pages is a child of the body element, this means that the entire page/site will be not displayed.

Once you have your "print.css" stylesheet, you would load it into your HTML as a print stylesheet. Here is how you would do that — just add the following line to the "head" element in your HTML pages.

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

This information tells the browser that if this web page is set to print, to use this stylesheet instead of whatever default stylesheet the pages use for on-screen display. As the pages switch to this "print.css" sheet, the style that makes the entire page not displayed will kick in and all that will print would be a blank page.

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>

This in-page style would have a higher specificity than any styles inside your external style sheets, which means that page would not print at all, while other pages without this line would still print normally.

Get Fancier With Your Blocked Pages

What if you want to block printing, but don't want your customers to become frustrated? If they see a blank page printing, they may get upset and think their printer or computer is broken and not realize that you have essentially disabled printing!

To avoid visitor frustration, 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.lifewire.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 ensure that the print message only appears on the printed page, while the web page only appears on the online page.

Consider the User Experience

Printing web pages is generally a poor experience since today's sites often do not translate well to the printed page. If you do not wish to create an entirely separate style sheet to dictate print styles, you can consider using the steps from this article to "turn off" printing on a page. Be aware of the impact this could have on users who rely on printing websites (perhaps because they have poor vision and struggle reading on-screen text) and make decisions that will work for your site's audience.

Original article by Jennifer Krynin. Edited by Jeremy Girard.