Brain Food for Web Developers


Printing Web Pages with the CSS Media Query

Although nowadays¬†it’s becoming more acceptable for people to read text from a screen (especially with the release of high resolution e-readers such as the iPad and the Kindle) it’s still very important that people have the option of printing a paper copy. Most websites, however, don’t prepare their pages to be displayed on paper. This can result in a headache when you discover that the web article you just printed out contains useless navigational menus, graphical advertisements, sentences that disappear off the side of the page and a colored background that just made your printer ink run out.

This article will walk through some of the easy steps involved in creating a printer friendly version of your webpages.

With the CSS media attribute it’s possible to designate separate style sheets for different media types. These types can include screen, handheld (for mobile devices) and print. By writing a printer friendly CSS file you can ensure that your page is optimized for paper based reading.

Here is how you assign a media attribute:

<link href=”/main.css” type=”text/css” media=”all” />
<link href=”/print.css” type=”text/css” media=”print” />

The first line references the main CSS file that is used for normal viewing. Although you can specify the type to “screen”, it is common to set it to “all”. The second line references the “print” media type. It’s useful to note that since the print.css file is linked to after the main.css file, it will override duplicate styles when printing.

The main body

First of all we’ll style the main body. When the text is printed to paper we want it to be easy to read.

Here are the steps we will take to make the main body easier to read on paper:

  • Set the font color to black (studies have shown that black text on a white background offers the optimum contrast for reading).
  • Make sure the font size is large enough (12pt is a good size on paper).
  • Increase line-spacing.
  • User a serif font such as ‘Georgia’ or ‘Times New Roman’ (serif fonts are easier to read on paper).
  • Set the background color to white (although most browsers don’t print the background color, it’s best to be sure).
  • Make the width of the page suitable for paper (this stops the text wandering off the side of the page).


Here is the code for that:

body {

color: black;
font: 12pt/20pt “Times New Roman”, “Georgia”, serif;
background-color: white;
width: 7in;


Display: none

Let’s assume you’re using a fairly standard page layout that contains a header, menu bar, main content and a footer. When you want to print the page you’ll probably just want the main content, and perhaps the header, to show on the paper. To make sure that the other sections of the page don’t display when you’re printing we use display: none.

#header { display: none; }

The same can be done with any other sections you don’t want to be displayed.

FAQ: What’s the difference between display: none and visibility: none? Visibility will make the element invisible, but it will still take up space on the page. Setting display: none with stop the element from being displayed at all.

If you’ve set background colors for any of the sections then it’s advisable to reset them to white. You should also want to change the dimensions of you sections so that they are relative, rather than fixed. This way they can adapt to the change of styling.


Whether or not to hide images is up to you. If the images don’t really serve any purpose then it might be wise to hide them. You can use the same method as described above to hide the images:

img { display: none; }

If you’re in a position where you want most of the images to be hidden but a select few to show up then you can create a custom class that will override the image styling.

.images { display: block; }

It’s a good idea to apply the same to flash objects too, especially if there is animation involved.


You may or may not want to change the way links are displayed on the paper. If you want to remove the blue coloring and underline then you simply just set a new style for the anchors:

a {

text-decoration: none;
color: #777;



Creating a CSS file for print is both easy and worthwhile. Doing so can avoid formatting issues by getting rid of unnecessary navigation, banners and images. Your content will be more concise, easier to read and you’ll save paper.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.