Legacy Docs
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:1
<link rel="stylesheet" href="main.css" media="all">
Copied!
You can also set the media attribute on inline
<style> tags:1
<style media=”all”>
2
h1 { text-align: center; }
3
</style>
Copied!
If you’d like to specify different styles for screen and print media, one option is to load two stylesheets:
1
<link rel="stylesheet" href="main.css" media=”screen”>
2
<link rel="stylesheet" href="print.css" media=”print”>
Copied!
Alternatively you can use media queries within your stylesheet:
1
@media print {
2
body {
3
color: #000
4
background: #fff
5
}
6
}
Copied!
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:1
article {
2
page-break-before: always;
3
}
Copied!
Last modified 3yr ago
Copy link