Quackit Logo

Got a MySpace Page?

Get "www.yourname.com" for your MySpace page. Learn how >>.

CSS Print Version

Print Version

You can use CSS to change the appearance of your web page when it's printed. For example, you can specify one font for the screen version and another for the print version.

To create separate styles for your print version you use the @media rule. The @media rule allows you to specify a different style for different media.

The example below specifies a different font for screen and print but uses the same size for both.

@media screen
{
p.bodyText {font-family:verdana, arial, sans-serif;}
}

@media print
{
p.bodyText {font-family:georgia, times, serif;}
}

@media screen, print
{
p.bodyText {font-size:10pt}
}

You can also the media attribute when linking to an external style sheet:

<LINK rel="stylesheet" type="text/css"
	 media="print" href="/css/print_version.css">

You can also use the CSS @media rule for other media types such as handhelds, braille, aural, projection, tty, and tv.

Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
                     
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!