Creating a Print Stylesheet in CSS

Although it is a rare occurrence that we actually physically print something on the Web, let’s not forget about print stylesheets. They can also make sure your website content is easier to read — and print. In this post, we will explain how to write a very basic and opinionated example of CSS print stylesheet that you can use as a starting point for your own needs.

What is a Print Stylesheet?

Print stylesheet is a collection of CSS rules which are used when a webpage is printed. These rules are in place to help things look good when they make it to the paper. Using print stylesheet, you can hide unneeded elements, adjust the fonts sizes and make sure that when user presses “Print”, on one hand he gets clear information, printed cleanly.

The CSS Code

Here’s a basic print stylesheet that covers common requirements for print-friendly content:

@media print {
  @page {
    size: A4;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body, p, h1, h2, h3, h4, h5, h6, li {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 18pt;
  }

  h3 {
    font-size: 14pt;
  }

  a:any-link {
    color: #0000FF;
    text-decoration: none;
  }

  a:any-link::after {
    content: " [" attr(href) "] ";
  }

  img {
    width: 100%;
  }

  header, footer, nav, aside, form, iframe, script {
    display: none;
  }
}

Understanding the Code

@media print:
- The ‘@media’ print rule is used to apply styles when the page is printed.
@page:
- The ‘@page’ rule sets the size of the page to A4.
Body:
- The ‘body’ selector removes the default margin and padding to avoid unnecessary whitespace.
Typography:
- ‘body, p, h1, h2, h3, h4, h5, h6, li’:
  - Sets a print-friendly font family (‘Helvetica, Arial, sans-serif’).
  - Uses a legible font size of ’12pt’.
  - Resets the font weight to normal.
- ‘h1, h2, h3, h4, h5, h6’:
  - Makes headings bold and adds some space below them for readability.
- ‘h1-h3’:
  - Sets larger font sizes for headings to distinguish them clearly.
Links:
- ‘a:any-link’:
  - Changes link color to blue (‘#0000FF‘).
  - Removes the underline from links.
- ‘a:any-link::after’:
  - Appends the URL of the link in brackets after the link text for reference.
Images:
- ‘img’:
  - Ensures images fill the page width to make them more visible.
Hiding Unnecessary Elements:
- ‘header, footer, nav, aside, form, iframe, script’:
  - Hides elements that are typically not needed in a print version, such as navigation, forms, and scripts.

Example Usage

To use this print stylesheet, include it within a ‘<style>‘ tag in the ‘<head>‘ section of your HTML document, or link to an external stylesheet that contains these rules.

<head>
  <style>
    @media print {
      /* Include the CSS code here */
    }
  </style>
</head>

Wrapping It Up

Using a print stylesheet ensures that your website will be printed as professionally and clearly as possible. With the example that you are provided Sonali also says that you will be able to mimic this on your website by adapting the print stylesheets she gives. Over-the-top attentiveness to detail like this makes it that much more pleasurable for users when the content gets taken offline and put on paper.