CSS Print Styles for PDFs and Printing

Diana MacDonald ¹:

You can use CSS print media styles to present your site’s content for print media, such as actual pages printing or for saving a page as PDF. This can let you write content once for the web and then format it differently for print. For an idea of what you could do with this power, you could:

• Let readers print your blog posts, recipes, or tutorials on paper.
• Add the ability to export reports in a SaaS product to PDF.
• Help customers print invoices, tickets, contracts, or other documents from your website.
• Convert web pages into a book.

Most resources I’ve found about print styles were written about a decade ago. In this post, I’ll share what I learned and what’s still relevant today.

Print CSS is the lesser known corner of the CSS specification, not often encountered by most web developers. A lot of it was specified in the early days of CSS and has remained stable since. While actual printing is one use case, the more common use these days is probably the generation of PDFs, something that I’ve had a lot of exposure to because I work at YesLogic on the Prince HTML to PDF tool.

Di’s post covers everything you need to know to get started using and developing print CSS in 2024.