CSS - Tutorials

Print with CSS - Tutorial

Back to FAQ Home | Back to Tutorial Home

In this tutorial we are going to construct a css file to allow us to send a formatted page to the printer. Normally this would incur producing a text only (printer friendly) page that the user could print out from their browsers Print button.

With CSS we have no need for that as we can specify a CSS file to be used when print output is required. This is simply achieved by placing media="print" in our stylesheet link tag. We also need to set the original stylesheet link tag to media="screen".

e.g.

As you can see the first statement tells the browser that the CSS file called main.css is to be used for output to the screen (i.e. your monitor display). The second statement tells the browser that the file called print.css is to be used when print output is requested via the browsers print button.

One of the main things to remember is that all your presentation in your web page should be under the control of your main stylesheet for this to work properly. Obviously if fonts and colours are embedded in your mark up then turning the stylesheet on or off will make little difference to this mark up.

OK assuming that your page is constructed properly with CSS what do we need to do next to set up the page for printed output. The first thing to do is to copy your main.css file and call it something like print.css. This will allow us the to change all the necessary settings that apply to our page to make it format correctly for printing.

There are many things you can do to the css file to make your printed output more desirable.

e.g.

You can turn things (images, text etc) off by setting the display property to none.
Hide your navigation and links
Change pixel sizes to points
Add or Hide headings
Adjust your layout and flow of the document

Lets start with a small example page and some basic css.

Click on the link below to see the sample page and try printing out a test page from the browsers toolbar (e.g. In IE6 select File, Print etc).

View example page

If you view the source you will notice that that I have left the css code in the <head> sections of the page. This is so that you can view it more easily. It still works this way as I have set media="print" and media="screen" in the style tags.

e.g.

One thing to note is that if you set your stylesheet to media="screen" then the printed version of the page will not use any of the css formatting and can sometimes be the only thing you need to do in order to arrange your page for printing.

On the example page you will notice that there is an image, some text and some simple navigation. However if you have tried to print the page you will notice that the image wasn't printed, the text colours were set to black and the sizes of the headings were different. Also you will notice that there was extra text printed that was not on the viewed web page.

All this can be accomplished quite simply as follows. In the main CSS file we have declared the main body text to be coloured and to be small (which is an absolute ref that browsers know about).

main.css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #FF0000;
background-color: #CCCCCC;
}

print.css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
background-color: #FFFFFF;
}

As you can see from the above code all I have changed is the font-size to 10pt and the color to black (#000000). I have also set the background colour to white but this isn't strictly necessary as the background doesn't get printed anyway, but it is always good practice to specify a background colour and a foreground colour together.

This change means that all body text will now be black when printed and will have a point size of 10 points which printers understand correctly.

To stop the image being printed I have merely set up an img rule in the print.css stylesheet that sets the image display to none.

img {
display: none
}

Obviously this will affect all images on the page but that is probably what you want anyway. If you only want to hide specific images you can wrap them up in a class as follows.

add this to your stylesheet:

.hide img {
display: none;
}
and then in the body of your document you will need something like this:

This will ensure that only images inside a class of hide will be affected by the image display being turned off. And of course as this is in your print stylesheet the image will be displayed correctly in your viewed web page.

Everything should start falling in to place by now! If we want to hide things in our print out we can set their display properties to display:none. If we want different sized headings, margins and other properties we just change the settings in the print.css style sheet to suit.

But how do we add text to our print out that is not shown on the viewed page. This is achieved quite simply by reversing the procedures we used above. In the print.css stylesheet we set the display to block (or in-line depending upon circumstance) and in the main.css stylesheet we set the display properties to none. This will ensure that the content we only want printed is not seen on the viewed web page.

An easy way to do this is to wrap the text etc in a div with a class so that we can turn the whole div off and on as required.

e.g.

In our print.css stylesheet we add this code:

.printtext {
display: block;
}
and then in the main.css stylesheet we add:

.printtext {
display: none;
}
and then in the body of our page we add this:

<div class="printtext">
<p>This text and the text below will only get printed and will not show in the
webpage.</p>
<p>www.pmob.co.uk</p>
<p>address1<br />
address2<br />
address3<br />
address4</p>
<p>Telephone 0101 0101010</p>
</div>

That's more or less it. You can of course format your printed output much more carefully and precisely than I have done here, but the general principles remain the same.

One thing that is useful is planning in advance to make things easier. If you are constructing a page for printing then design with that thought in mind. You could use one of the headings such as h3, h4 etc to be used as your printed text. i.e. text that is only the printout and not viewed on the screen. Then you would be able to turn all this text on or off by simply setting the property of the h3,h4 tag to display: none or display:block.

The best way to learn is to experiment and to practice and to keep on coding.

Print with CSS - Tutorial

Back to Top

Paul O'Brien www.pmob.co.uk