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