Print Style Sheets: The Basics (for No Excuses)

Published on Feb 21, 2007 (updated Feb 5, 2024), filed under development (feed). (Share this on Mastodon or Bluesky?)

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

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)