How Do I Hide Screen Elements When a Page Is Printed?

It's often useful to hide certain elements when a page gets printed. For example, your Navigation Menu, or a Search button are usually pretty useless on paper.

In the old days, this was often implemented with a separate "printer friendly" page. A big disadvantage of this solution is that you need to create two pages; one normal page, and a page that just displays the content you want to be printed. This means updating two pages whenever the content or the design of your site changes.

But did you know you can use some CSS to hide screen elements you don't want to display when the page gets printed? Modern, standard compliant browsers support embedding a style sheet specifically for print media. Whenever a page gets printed, the browser first applies the normal style sheet and then this print sheet. This means you can use the print sheet to override or extend the style sheet info from your normal sheet.

Inside that style sheet you can define a special class (like NonPrintable or any other name you choose) that hides the elements you don't want to appear on paper. Alternatively, you can also override the behavior for your other classes so they are hidden when printed. CSS information defined in the print style sheet will take precedence when the page is printed. Consider the following example that hides an HTML form button when the page is printed: 

<html>
<head>
  <title>Non Printable Stuff</title>
  <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css">
  <link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
</head>
<body>
  <input type="button" value="I am hidden" class="NonPrintable">
</body>
</html>
As you can see, two style sheets are linked in the <head> section. One is used for ordinary, on-screen style stuff. The other has been marked with media="print" which means it is only used when the page is printed. To actually hide the button when the page is printed, you'll need to add the following definition for the NonPrintable class in the second style sheet (PrintStyle.css):

.NonPrintable
{
  display: none;
}

In the print style sheet, you can also hide other elements like your menu, header, footer or whatever it is you don't want to be printed:

.NonPrintable, #Menu, #Footer
{
  display: none;
}

You can use this trick in combination with a reversed, .PrintOnly class that only outputs stuff when the page is printed. This can be useful to display the full address of hyperlinks, for example.

Besides the separate style sheet, you can also use embedded style sheets with the media attribute, like this:

<html>
<head>
  <title>Non Printable Stuff</title>
  <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css">
  <link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
  <style type="text/css" media="print">
    .NonPrintable
    {
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="I am hidden" class="NonPrintable">
</body>
</html>

When you print this page, or request a Print Preview in the browser to save some trees, you'll see that all the navigation stuff, the logo and buttons are hidden. In addition, you can see a box at the end of the article with some details like the full URL of the article. This helps people to reconnect a printed document to its Web version at a later stage.


Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 240
Full URL https://imar.spaanjaars.com/240/how-do-i-hide-screen-elements-when-a-page-is-printed
Short cut https://imar.spaanjaars.com/240/
Written by Imar Spaanjaars
Date Posted 02/03/2004 21:42
Date Last Updated 02/13/2005 13:01
Date Last Reviewed 12/06/2006 18:09
Listened to when writing Weather Storm by Massive Attack (Track 4 from the album: Protection)

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.