7 CSS tricks for a print stylesheet

Lee — Fri, 16 Oct 2009 08:24:03 +0000

Difficulty: 1 out of 5 stars
There are some cool styling tricks, which are nice to have when it comes to printing out a webpage.
Please see my Print CSS snippets and tricks:

Do not use much styles. If you print out a webpage you don’t want to print colors! (unless to color hyperlinks). Keep it plain and simple and write a short print stylesheet.
Make sure you named your (2nd) stylesheet for printing: print.css
And give it the ‘media’ attribute print:

Use a good readable font. I would say a “serif” 12pt font and ofcourse keep it black.

body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }

It should be clear when a hyperlink is printed. Therefore keep links underlined. You can even color it blue.
```
a { text-decoration : underline; color : #0000ff; }
```
Do not print out layout parts, navigation, javascript or flash animations.
```
#navigation, #headerImage { display: none; }
```
This is a handy trick: With these styles you can set a page break for printing before or after:
Possible attributes are: always (print page break) | auto (default – page break where page ends) | left | right.
```
H1 {page-break-after: auto}
H2 {page-break-before: always}
```
Another handy trick, is to print the URL after an underlined hyperlink:
```
a:link:after, a:visited:after { content: " (" attr(href) ")"; }
```

Ladysign Dev Blog » tricks

7 CSS tricks for a print stylesheet