CSS Print Styles: How to Create Perfect PDFs from HTML

The Power of CSS Print Styles

Most developers spend their careers writing CSS for screens — phones, tablets, laptops, and monitors. But CSS has an equally powerful set of features designed specifically for printed output, and these features are the secret weapon for generating beautiful PDFs from HTML.

When a headless browser like Puppeteer converts your HTML to PDF, it activates the print media type. Any styles you define inside @media print blocks take effect, overriding or supplementing your screen styles. By investing a small amount of effort in print CSS, you can transform a mediocre PDF into a polished, professional document.

This guide covers everything you need to know about CSS print styles, from the basics to advanced techniques. Once you have these skills, you can try them in our HTML to PDF converter to see the results instantly.

The Foundation: @media print

The @media print rule is the entry point to print-specific styling. Anything inside this block applies only when the document is being printed or converted to PDF.

@media print {
  .no-print { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
}

The most common use of @media print is hiding elements that do not belong in a printed document: navigation bars, sidebars, cookie banners, floating chat widgets, and interactive controls.

A critical best practice: always use !important on display: none rules inside print media queries. Screen styles often use specificity tricks that can override your print rules.

The @page Directive

While @media print controls the appearance of content, the @page directive controls the page itself — its size, margins, and orientation.

@page { size: A4; margin: 20mm; }
@page :first { margin-top: 40mm; }
@page :left { margin-left: 25mm; margin-right: 15mm; }
@page :right { margin-left: 15mm; margin-right: 25mm; }

The size property accepts standard paper sizes (A4, A3, Letter, Legal, Tabloid) as well as custom dimensions. You can also specify orientation directly: size: A4 landscape. Our converter also lets you set page size, orientation, and margins through the settings panel.

Controlling Page Breaks

Page breaks are where print CSS truly shines. The three essential properties are:

.chapter-heading { page-break-before: always; }
h2, h3 { page-break-after: avoid; }
table, figure, .card, blockquote { page-break-inside: avoid; }

page-break-before: always is indispensable for multi-section documents. Place it on chapter headings or any element that should start on a fresh page.

page-break-after: avoid prevents headings from appearing at the very bottom of a page with no content following them.

page-break-inside: avoid is the workhorse. Apply it to tables, images with captions, code blocks, testimonial cards, and blockquotes.

Typography for Print

Use point sizes. While pixels dominate screen CSS, points (pt) are the traditional unit for print. 12pt is a comfortable body text size.

Increase line height. A line-height of 1.5 to 1.6 is comfortable for printed body text.

Choose readable fonts. Serif fonts like Georgia and Garamond are traditionally preferred for printed body text because serifs guide the eye along lines of text.

Expand links. In a PDF, hyperlinks might be printed on paper where the URL is invisible. A common pattern:

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em; color: #666;
  }
}

Handling Tables in Print

Tables are tricky in print CSS. Use proper markup so headers repeat on each page, apply page-break-inside: avoid to elements, and consider switching to landscape for wide tables.

@media print {
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  table { font-size: 10pt; width: 100%; }
}

Backgrounds and Colors

By default, browsers do not print background colors. Use print-color-adjust: exact to force them:

@media print { * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

Advanced Techniques

Orphans and widows. Prevent single straggling lines:

@media print { p { orphans: 3; widows: 3; } }

A Complete Print Stylesheet Template

@media print {
  nav, .sidebar, .cookie-banner, .chat-widget, button:not(.print-visible), footer { display: none !important; }
  body { font-family: Georgia, serif; font-size: 12pt; line-height: 1.6; color: #000; background: #fff; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  h1, h2 { page-break-after: avoid; }
  h1 { page-break-before: always; }
  table, figure, img, blockquote { page-break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
}
@page { size: A4; margin: 20mm; }
@page :first { margin-top: 30mm; }

Conclusion

CSS print styles are a small investment that yields dramatic improvements in PDF quality. Combined with a headless browser converter like HTMLtoPDF, these techniques give you complete control over every aspect of your PDF output. Try pasting some HTML with print styles to see the difference yourself.