Quackit Logo

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

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 (i.e. by using the HTML link tag):

<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.

Creating a "Print this Page" Button

You can use JavaScript to automatically open the print dialog box. Therefore, you can create a "print this page" button that, when clicked, automatically opens the print dialog box. This can be a useful feature, as it can encourage users to print your page for later reference.

To do this, see the JavaScript Print article.

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!