We’ve started using media queries to change our layout at different breakpoints, particularly to optimize the experience when viewing on a mobile phone. In addition to media queries that target the screen, we can also create media queries that target print. These styles will only be applied when a user prints the website.
As part of your Zine projects, you are required to create a print stylesheet to optimize your zine for print. Today, we’ll practice how to do that.
/* Put your print styles at the bottom of your CSS, so that they take precedence over the styles defined at the beginning of your CSS file. Remember that CSS styles cascade down. */
@media print {
/* All your print styles go here, for example: */
.header,
.footer,
.nav {
display: none !important;
}
}
In addition to giving you the ability to control the styles of your document when printed, there are also a number of print-specific CSS rules that come in handy when creating a print stylesheet.
Refer to the CSS Tricks article below to learn about the page-break CSS property. This helps you control where the printed document should break onto new pages, or try to avoid breaking.
Depending on how your document is laid out, you may want to try to fit the zine onto a single page. Or, you may want to use the page-break property to split it up into multiple pages in an interesting way.
Headers, footers, sidebars, and other web-specific components might not make sense in a printed document. It is common to hide these elements.
How does the typography scale in print vs on the web? Do you need to make drastic changes to the typography when printing?
👉 Now you try!
Using the progress you’ve made in your Zine project so far, add a print media query to your document. To preview the styles of your print stylesheet, press cmd+p to print the page, then select Save as PDF in the destination.
/* Put your print styles at the bottom of your CSS, so that they take precedence over the styles defined at the beginning of your CSS file. Remember that CSS styles cascade down. */@media print { /* All your print styles go here, for example: */ .header, .footer, .nav { display: none !important; }}Resources
What will your print media queries do?
👉 Now you try!