Print CSS basics

by Michael Ahgren

In the Adobe GoLive user-to-user forum
at [http://www.adobe.com]
we often get questions about how to make a web page print well. Here are some basic hints and ideas that will take you a long way

First, let's identify what the problems might be when we print a page. Here are some very common problems:

  • The background color is black. (or some other color)
  • The text is too light.
  • Images don't look good in print.
  • You don't want navigation objects to display when printing.
  • You have no use for links saying "click here".
  • The font and/or font size might not print well.
  • The width of the document doesn't fit the paper.

We will now use two Cascading Style Sheets (CSS) to solve the problems in this page. The best solution is to use two external style sheets, but I have placed all the CSS in this document to make it easier to see.

This is how the CSS that controls the screen display looks:

<style type="text/css" media="screen"><!--
body { color: white; font-size: 13px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: black }
a { color: #ffa500 }
table#main { width: 750px }
.noScreen {display:none}-->
</style>

Nothing strange there:

  • We are setting the background color to black.
  • The font to Ariel, white , 13px.
  • The color of the links is set to orange.
  • The Main table is set to a width of 750px.

At the end of the CSS you find something more unusual ".noScreen {display:none}". It's a class that we will use to make things disappear from the screen version of this document!

My next step to fix this document was to add things that only will be visible in the printed version.

  • A new header (text instead of the image).
  • Link URLs (that can be read). I just typed the URLs after the links.

After I added those things I put every one of them into <div> </div> tags and assigned them the class "noScreen". That made them invisible in the screen version.

The next step is to create the print CSS, but before you do that change the media type of the CSS you have been working on to "aural". That will make the browser ignore the first CSS while we work on the print CSS.

So...now we create a second CSS with the media type set to "screen" so we can see the effect of what we are doing.

I decided to make the following changes for the printed version.

  • Hide all links.
  • Hide the header image.
  • Change the font to Times (which is easier to read in print).
  • Change the font size to "pt" which is handled much better by printers than "px".
  • Change the text to black.
  • Change the background to white.

Here is the print CSS:

<style type="text/css" media="print"><!--
table#main { width: 550px }
body { color: black; font-family: "Times New Roman", Georgia, Times; background-color: white; font-size:11pt; }
.noPrint{display:none}
.noScreen {display:normal }
a {display:none}
--></style>

This CSS will give us a more narrow table (550px), black text on white background and the font Times in the size 11pt.

The next step is to apply the class noPrint to everything we don't want to print. In this case I'll only use it on the header image.

We use the class noScreen to set the invisible things in the screen CSS to be visible when we print..

The last CSS rule makes all the links disappear.

Now we only have two more easy things to do.

  • Change the media type of the first CSS from "aural" to "screen".
  • Change the media type of the second CSS from "screen" to "print".

There are so many other things you could do with this document but I have skipped paddings and margins and other things that could make things more confusing. I'm sure you will pick up those things as you go...

A warning! NN4 can't handle print CSS, it will just use the last CSS it can find in the page, so placing the screen CSS last is a good idea. If you want to support NN4 you will need to tweak my code a bit. NN4 will need more table values, it can't handle empty cells etc...

Well, go ahead and print this document and see what you think... :-)

PS. If your only problem is that the layers don't print correctly in IE you can set the media type for your CSS to “all”, that should fix the problem!

Go to the top >