CSS for Print

Quick Link: Going to Print

Standards Compliant
W3C CSS Print Profile [css3]
W3C Paged Media [css3]
W3C XHTML Print DTD

CSS Print Media

Seperate styles will need to be added for printing. You have options on how you can add them to your code:

Link (preferred)

link rel="stylesheet" type="text/css" media="print" href="print.css" /
Import
@import url(paged.css) print,projection;
Embed
STYLE type="text/css"
@media print {
BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
BODY {font-size: medium; line-height: 1em; background: silver;}
}
/STYLE

Remove the Extras
#header, #footer, #nav { display: none; }

"What I do is gang up all the things we don’t want to print in a single block at the top of the sheet. I always know where the 'don’t print' stuff is, and removing another thing from the printout is as easy as adding the class or ID selector to the common display: none; rule." - Jason Fried (getting things done the simple way) [3]

Floats Don't Always Print
Well, they only print from Gecko-based browsers. So cross-browser printing means stopping the floats.
#floatedContent { float: none; }

Bye, Bye Backgrounds
Get rid of background images and colors by setting your body background to white and all other content with background images or colors to transparent. Remember to update your font colors also when you were using light font on a dark background.
body { background: white; }
#contentWithBackgrounds { background: transparent; }

Print Readability
Use points and serif fonts (Georgia, Times New Roman) for print. All font sizes that are not relative (% or em) to the body font size will have to be adjusted (ex. 12px changed to 12pt; 14px changed to 14pt).
body { font-size: 12pt; font-family: serif;}

Control the Print Layout with Your Margins

"Unfortunately, some browsers have trouble handling padding appropriately, so it’s currently a better idea to move things around with margins whenever possible." - Eric Meyer [1]

Visible Links
Ideally you would want your links to stand out and be referenced in the print version.
This example provided by Eric Meyer at the least will show your links as bold, underlined text and at the most will show as red text with the linked URL displaying next to the hyper linked text. Gecko-based browsers give the most ideal results.

a:link, a:visited
{
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}

#content a:link:after, #content a:visited:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}

#content a[href^="/"]:after
{
content: " (http://www.yourURL.com" attr(href) ") ";
}

Replace http://www.yoururl.com/ with the site's URL.

Paper Size

"We chose 535 pixels as the maximum dimension for the page layout because that is the widest table that will print on standard letter size or A4 paper " - Yale Style Manual [5]

Resources

[1] Going to Print

[2] Print Different

[3] Little CSS print stylesheet tip

[4] W3C Paged media

[5] Yale Style Manual - dead link

Read More

• 
  Applying CSS from Screen to Print to Handheld – Part 1: Preparation and Groundwork
• 
  Ben Meadow Croft gives you templates that include print style sheets

Related Topics: Email for Print