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: #000background: #fff}}
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;}