Print Style Sheets: The Basics (for No Excuses)

Published on February 21, 2007 (↻ February 5, 2024), filed under Web Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

There are no excuses for not having at least a simple print style sheet. If you’re already on the web standards track, things are simple. (There’s no need to force users to disable style sheets, open print previews, select pages they want to print, and finally print.)

Let’s go. The world’s most basic print style sheet is based on this simple rule:

@media screen {
}

…assuming that you don’t mix structure and presentation, use only a single style sheet (big advantage, again), and don’t tie media types to the HTML style sheet reference. In this case, when printing, the result will be an unstyled page where user agent style sheets almost do the job.

The next step is “real” print optimization. For example, you may want to make sure that everything’s black on white, and you probably need another font (since several system fonts don’t work that great on paper). Voilà:

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

}

(Derived from the meiert.com style sheet and based on my own CSS coding guidelines [about which I later wrote a book].)

That’s neat. You add the above snippet to your (via @media) screen-targeted style sheet, or, if you can’t avoid it, you remove the @media print { and } parts and use the remaining rules to create an extra print style sheet.

A note regarding additional print style sheets: I didn’t carefully analyze this but I suspect user agents to download print style sheets on document load, not only in case of printing (which makes some sense). This means that even larger print style sheets might be located in the corresponding “main” style sheet without increasing load time. Quite the contrary: Using only a single style sheet saves one or more additional server requests, so this procedure will bring better performance. With small print styles (like the above), it should be clear that using one style sheet is useful.

Let’s finish our excursion on print CSS: In print, users do not benefit from navigation menus or footer sections. Let’s remove them in the print version:

@media print {

  #nav,
  #about {
    display: none;
  }

}

(You probably need to adjust the above selectors to fit your needs.)

All this stuff combined will create one of the most elegant solutions for your users’ “I can’t print this document and I hate you because all you had to do was exclude print media from your style sheets” problem.

@media screen {

  /* The regular stuff. */

}

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

  #nav,
  #about {
    display: none;
  }

}

What a pep talk. (If now my favorite bloggers, Mark Cuban and Guy Kawasaki, felt encouraged to improve the print styling of their sites!)

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

Comments (Closed)

On February 22, 2007, 11:13 CET, Jens Grochtdreis said:
Well, “dead simple” and print styles do only fit on the first sight. As long as the Mozilla-programmers don’t want to correct a big fault inh their program which they know of for at least five years, it can be very horrible to write a print stylesheet. All Mozillas fail when encountering a float.

Speaking of failing: there is not one browser that interpretes all the good and nice specifications for print styles. So, writing a print styles can be a big headache except for simple layouts as from blogs as yours or mine.
On February 24, 2007, 9:54 CET, Steve said:
You may want to test this for accessibility with screen readers. In the past Jaws had difficulty with the media selector when screen and print were in the same file. It would apply all of the rules despite the media selector and render some of the content(i.e. nav as display none making it impossible for a Jaws user to access or even know it was there. placing the print styles in a seperate file and using the link tag to include it resolves the issue.
On February 28, 2007, 23:17 CET, Jesse said:
Thanks much for this! I haven’t explored this at all and your post gave me a great start.
On March 1, 2007, 13:26 CET, Jens Oliver Meiert said:
Jens, it definitely must not be difficult even for more complex sites. It may start with exactly what I present here.

Steve, thanks for pointing that out—according to feedback by Gez Lemon, it seems that the mentioned problem has been fixed since JAWS 7.1. However, I also remember that using @media print rules may actually influence the appearance of documents in IE 5, since their implementation is quite buggy in this regard. Thankfully, this IE version is almost dead.
On April 14, 2007, 18:26 CEST, Peter said:
What is Media:projection for? Opera is the only browser that supports this media type.
On April 14, 2007, 20:48 CEST, Jens Oliver Meiert said:
…since projection makes sense, and for Opera, right. 😊
On June 25, 2007, 9:34 CEST, Siegfried said:
Absolutely necessary, indeed. Although i prefere to add the media descriptor to the HTML like:
<link rel=”stylesheet” type=”text/css” media=”print” href=”style/Print.css”>

This prevents the loading of unneeded Stylesheets at all. It just means that you have several stylesheets. I have a system with basically 3 stylesheets: One basic for all media, defining the major geometry, one for screen, adding colours and pictures, and one for printer, not adding colors but correcting the geometry (disabling the nav bar and extending the main container into the now free nav bar area).
Avoiding “conditional comments” to include IE specific stylesheets may be a good idea, but there is no reason to avoid splitting your styles this way. Contrary it helps organizing the styles.
On June 25, 2007, 10:31 CEST, Siegfried said:
BTW: Indeed projection media makes sense. This would enable Powerpoint style presentations. The fact that neither IE nor Mozilla support this media type does not mean this is a bad idea. There is another badly supported media type, which coul dbe of great use: Aural.
On June 25, 2007, 10:50 CEST, Jens Oliver Meiert said:
I usually advise to reference just a single media independent style sheet to move maintenance further away from HTML; you can choose style sheet ordering and media types from a default.css or whatever, too.

Nice note on aural (though you probably refer to speech?) which reminds of the reader media type, too ~~[…]~~.
On June 26, 2007, 16:35 CEST, Siegfried said:
Yes, speech. Although i think this is called “Aural” in the w3c documents, but i’m not really sure.
And btw h little hint, how to learn using css the right way (proper class names and the like): I learned that by applying several socalled “alternate” stylesheets to the page. During the learning phase alternate stylesheets which completely changed the pages geometry. Doing this enforces the use of meaningful semantic markup. If you don’t do so, none of these alternate stylesheets makes any sense, and you will notice that. One day this lead to some practical organisation of all those stylesheets. This is the reason why i prefere my styles organized into several files. I do not change geometry any more, that simply irritates the user, but for learning this was great.
On August 21, 2008, 18:43 CEST, Trupti Patil said:
I would like to control the auto page numbering offered by printer through CSS for my ASP reports.
On June 4, 2009, 18:06 CEST, Gordon said:
An even easier way.

Prepare a print.css. The first line should be @import “style.css”; (or whatever you have called it)

Next add the following lines
```
.NONO{display:none;}
a {text-decoration:none;color:#000;}
```
Add the class NONO to each div that you DON’T want printed e.g nav bars, menus etc.

NOTE is is possible to assign more than one class at a time e.g. class = “nav NONO”

Put a reference to the print.css in our pages and that’s it.

When a page is previewed or printed the divs with class = NONO will not print, and all links will be in black with no underline.
On November 12, 2009, 15:39 CET, maxodo said:
Is it possible to use the @media print rule to print images defined by the css stylesheet? I need to print the background-images.

Thanks in advance.