Quando faccio un sito vorrei anche che – allo stesso modo in cui si vede a schermo come voglio io – venga stampato in maniera decente.

Spesso capita che la stampa non corrisponda, allora credo sia meglio usare un foglio di stile per la visualizzazione a monitor…

<link rel='stylesheet' href='css-per-il-monitor.css' type='text/css' media='screen' />

… ed uno per la stampa …

<link rel='stylesheet' href='css-per-la-stampante.css' type='text/css' media='print' />

Gli accorgimenti che uso io di solito sono:

nascondere gli elementi che non mi interessa vedere in una stampa – come i menu, i widget, il footer, i banner, ecc. – e fare in modo che le immagini non vengano tagliate in due, venendo stampate a cavallo di 2 pagine/fogli diversi.

Per la prima cosa basta usare un display:none affibbiato agli ID e Classi che vogliamo.
Per la seconda invece basta usare il page-break:

img {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}

Il page-break è una “interruzione di pagina”, quindi le prime 2 righe delle 3 precedenti ordinano di interrompere la pagina primo o dopo un’immagine; la terza ordina di non farlo in mezzo all’immagine.

fonti: http://web.archive.org/web/20150822085608/http://www.w3schools.com/css/css_mediatypes.asp , http://www.w3schools.com/cssref/pr_print_pagebb.asp , http://stackoverflow.com/questions/2649169/print-styles-how-to-ensure-image-doesnt-span-a-page-break
approfondimento: http://teamtreehouse.com/library/websites/css-foundations/printing