Blog: Web Design
Printer Ink cartridges

Adding Print Style Sheets

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Print styles today an oft-neglected piece of web design. As web designers, we spend a lot of time thinking about how pages will looks on mobile devices and different sized screens. But many people in offices across the country still rely on printing information for sharing and distribution.

Adding print style sheets to your website doesn’t have to be difficult. Here’s a walk-through of how I added print styles to this site.

Why Print Styles Are Still Important

Have you seen the price of printer ink? Now there’s a market to get into.

Customers don’t want to spend a fortune in printer ink to see what your web pages will look like when they are printed. Print styles provide a better user experience and strip out all the non-essential information web pages tend to have.

How To Make A Print Style Sheet

There are two ways you can set up your print style sheet. Many commercial WordPress themes use the old-school method of adding a separate CSS print file, and linking it in the . This option usually looks like this:


<link rel="stylesheet" type="text/css" media="print" href="print.css">

The other method is to add the print styles to the main style sheet using media queries.


@media print {
  /* Override print styles go here */
}

This is the method I use on this site. As with other media queries, you don’t need to build a brand new style sheet from scratch. Just list the differences between the screen version and the print version.Here’s what print styles look like on this site.



/* Print ----------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #454545 !important;
  }
  .secondary, .footer, .nav, .pagination, .yarpp-related, #comments, img.about-headshot, .testimonials-widget, .offwhite, .bx-wrapper, .test-headline, .design-stage p i, .fa, .page .post-featured-img, .single-post .post-featured-img, .single img {
    display: none;
  }
  .home-page-headline, .home-page-tagline, .branding a, .design-stage, .design-stage h2, .home-page-text p, .home-hero-image p, .services-headline {
    color: #454545 !important;
  }
  .branding {
    position: relative;
  }
  .header {
    border-bottom: solid 3px #7e93a8;
    height: 3em;
  }
  .content, .home-page-text, .web-strategy, .web-development, .web-design, .design-process-story, .full-width {
    margin: 24px 4%;
    width: 92%;
  }
  .content {
    margin-top: 0;
  }
  .web-strategy, .web-development, .web-design, .full-width, .ghostly, .design-process-story {
    height: auto;
    padding: 0 !important;
  }
  .web-strategy, .web-development, .web-design {
    max-height: 2.67in;
  }
  .web-strategy .overview, .web-development .overview, .web-design .overview, .web-strategy .overview h2, .web-development .overview h2, .web-design .overview h2 {
    color: #454545;
    text-shadow: none;
  }
  .web-strategy .overview, .web-development .overview, .web-design .overview {
    left: 0;
    width: auto;
  }
  .entry-content {
    margin-left: 0;
  }
  .about-headline {
    font-size: 3em;
  }
  .design-stage {
    height: auto;
    max-height: auto;
    max-width: auto;
    min-height: 0;
    width: 88%;
  }
  a:link, a:visited { 
    color: #318c94; 
    background: transparent; 
    font-weight: bold; 
    text-decoration: underline; 
  }
  .content a.more-link, .single-portfolio a.more-link, .hero-img-btn, .about-content .hero-img-btn {
    background-color: none;
    border: none;
    box-shadow: none;
  }
  .entry a:link:after, .entry a:visited:after, .entry-content a:link:after, .entry-content a:visited:after { 
    content: " (" attr(href) ") "; 
    font-size: 90%; 
  }
  .entry-content .tm-click-to-tweet a:link:after, .entry-content .tm-click-to-tweet a:visited:after, .entry-content .author-bio a:link:after, .entry-content .author-bio a:visited:after, .entry-content .tags a:link:after, .entry-content .tags a:visited:after {
    content: none;
  }
}

Let’s break down these decisions one by one.


@media print {
  body {
    background: #fff;
    color: #454545 !important;
  }
  .secondary, .footer, .nav, .pagination, .yarpp-related, #comments, img.about-headshot, .testimonials-widget, .offwhite, .bx-wrapper, .test-headline, .design-stage p i, .fa, .page .post-featured-img, .single-post .post-featured-img, .single img {
    display: none;
  }
  .home-page-headline, .home-page-tagline, .branding a, .design-stage, .design-stage h2, .home-page-text p, .home-hero-image p, .services-headline {
    color: #454545 !important;
  }
}

Most browsers will attempt to guess at color styles. But it is always a good idea to explicitly define the colors. Here, we are giving the document a white background and dark gray text.

All the color-dense elements — images, icons, and the dark header and footer areas are eliminated. Navigation elements, the email signup and social links are also eliminated. The front page testimonials slider doesn’t seem to render in print, so let’s get rid of that, too.


@media print {
 .branding {
    position: relative;
  }
  .header {
    border-bottom: solid 3px #7e93a8;
    height: 3em;
  }
}

The page header and site title remain, but other header links are disposed of. Our users can’t click through to them, so why print them?


@media print {
  .content, .home-page-text, .web-strategy, .web-development, .web-design, .design-process-story, .full-width {
    margin: 24px 4%;
    width: 92%;
  }
  .content {
    margin-top: 0;
  }
  .web-strategy, .web-development, .web-design, .full-width, .ghostly, .design-process-story {
    height: auto;
    padding: 0 !important;
  }
  .web-strategy, .web-development, .web-design {
    max-height: 2.67in;
  }
  .web-strategy .overview, .web-development .overview, .web-design .overview, .web-strategy .overview h2, .web-development .overview h2, .web-design .overview h2 {
    color: #454545;
    text-shadow: none;
  }
  .web-strategy .overview, .web-development .overview, .web-design .overview {
    left: 0;
    width: auto;
  }
  .entry-content {
    margin-left: 0;
  }
  .about-headline {
    font-size: 3em;
  }
  .design-stage {
    height: auto;
    max-height: auto;
    max-width: auto;
    min-height: 0;
    width: 88%;
  }
}

Most of this is from the home page, with big spacious images with lots of padding and a little bit of text. This required a lot of trial and error to test. We got rid of some unnecessary white space on the inner pages as well, since we took out some other elements.

You can see how your print styles will look in most browsers by using Right-click -> Print. This usually gives you a preview of what a PDF of the page would look like.


@media print {
  a:link, a:visited { 
    color: #318c94; 
    background: transparent; 
    font-weight: bold; 
    text-decoration: underline; 
  }
  .content a.more-link, .single-portfolio a.more-link, .hero-img-btn, .about-content .hero-img-btn {
    background-color: none;
    border: none;
    box-shadow: none;
  }
  .entry a:link:after, .entry a:visited:after, .entry-content a:link:after, .entry-content a:visited:after { 
    content: " (" attr(href) ") "; 
    font-size: 90%; 
  }
}

To be honest, I got this idea from the articles on A List Apart entitled “Going To Print” and “ALA Print Styles”. First, we underline any links, so the reader knows what to look for later, if they look it up online. We also simplify some call-to-action buttons by doing away with certain styles.

But if we have articles with links in them, our readers might want to reference those later. So, the last rule states that after each blog post link anchor, it will add the corresponding URL.

Now that you have a better idea of how to implement print style sheets, let’s examine what method is best for your situation — separate style sheet, or media queries?

Print Styles and Front-End Performance

In the past, it was common to have a style sheet for screens, and a separate style sheet for print. Today, it is a best practice to add print styles to the main style sheet with media queries. Why is this?

CSS is part of what is called “the critical path” for browsers. Each style sheet has to be downloaded for the page to render. Most browsers won’t render the page until all these files are downloaded. Not only does the the extra CSS file cost precious milliseconds to download, but it can block rendering of the page.

Performance and page speed are increasingly important, especially with mobile use above 50% of all web traffic in the US. Slow render times means lower customer conversion rates, more abandoned carts, higher bounce rate, and lower search rankings from Google.

How Browsers Parse Separate Print Style Sheets

Firefox and IE8 through IE 11 treat a separate print style sheet as part of the critical path, even on a regular screen. Safari, Android and Mobile Safari are not quite as bad, but still do not consider the DOM fully loaded until the print style sheet loads.

Chrome and Opera will render without the print style sheet, but Opera does not consider the DOM complete until print styles load.

Therefore, I try to combine print styles into my main style sheet. Once this is cached by a visitor’s browser, it won’t need to load again.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.