Guide: Styling documents for PDF and printing

Tips for building HTML documents that are intended to be converted to PDF.

The media attribute and media queries

First, it’s really important to tell the browser to use your styles for print media! If you’re wondering “why aren’t my styles being picked up at all?!” - make sure that you’re using the media attribute or a media query.

There are a few ways you can do this. When linking to an external stylesheet, you can set the media attribute to all. This instructs the browser to use these styles for all media types, including print:

<link rel="stylesheet" href="main.css" media="all">

You can also set the media attribute on inline <style> tags:

<style media=”all”>
  h1 { text-align: center; }
</style>

If you’d like to specify different styles for screen and print media, one option is to load two stylesheets:

<link rel="stylesheet" href="main.css" media=”screen”>
<link rel="stylesheet" href="print.css" media=”print”>

Alternatively you can use media queries within your stylesheet:

@media print {
  body {
    color: #000
    background: #fff
  }
}

Controlling page breaks

You can use the page break properties to control where page breaks occur. For example, you might want to force each <article> element to start on a new page:

article {
  page-break-before: always;
}