noPrint class for print stylesheets

By Geoff Muskett

The few lines of CSS below for a base for most of my print stylesheets. Generally, you won’t want the header, footer and navigation to print so give them a display:none. Image-wise, a convenient size to fit on a portrait A4 page is 500px.

The interesting bit it is the “noPrint” style. I [try to remember to] add this to elements as I’m building, pretty obviously it stops them from printing. I’ll put it on anything thats not the main focus of the page; any secondary navigation; sidebar stuff; search boxes etc.

Of course there will be project specific things to put in here, but it’s a good start point.

@media print {
header,
nav,
footer,
.noPrint {display:none;}
img {max-width:500px;}
}

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.