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