CSS for Printing - Printer Friendly Web Pages

by Liz Jamieson on August 27, 2007

in Web Technical

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

You often find pages on the web that offer a special printer links that when you click,
pop up a printer-friendly formatted version of the web page you want to print.

An easier way to achieve this for yourself is to invoke the @media print command to your
stylesheet, which makes any part of the page that you prefer to leave out of the printed
version, invisible. You can also override any background images, and change font

sizes if you wish.

For example : adding this to the bottom of your stylesheet (obviously changing it to use
div class or id names . . .)

@media print {
body {font-size: 10pt; line-height: 120%; background: white; width:900px;}
.header {display:none}
.footer (display:none)
.navigation {display:none}
}

  • Digg
  • StumbleUpon
  • Technorati
  • del.icio.us
  • Blogosphere News
  • Blogsvine
  • Facebook
  • TwitThis

Popular Posts

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post: Party Princess!

Next post: Better Gmail - XHTML/HTML Signatures for Gmail from Firefox