CSS Based Printing Tip

0 comments suggest 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:

.noprint
{
    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.

<html>
<head><title>example</title></head>
<body>
<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>
</div>
</body>
</html>

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

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

6 responses

  1. Avatar for S-chip
    S-chip October 4th, 2007

    I used the class, but the text printed out anyway.

  2. Avatar for Vanezamellare
    Vanezamellare January 28th, 2013

    hi textmet ta? 

  3. Avatar for Asoyjunel
    Asoyjunel January 28th, 2013

    dili ko makig textmet nmu oi...hahaha

  4. Avatar for Asoyjunel
    Asoyjunel January 28th, 2013

    no way..

  5. Avatar for Romi Sharma
    Romi Sharma July 5th, 2013

    Best way is to put

    document.getElementById('print_button_id').style.visibility = 'hidden'

    before print event

  6. Avatar for Bob
    Bob August 8th, 2017

    To be honest I am very thankful for this tutorial. It was very usefull since I just have a smalfield tat should be printed when a user uses the pront button.