CSS Print Styles: Make Your HTML Look Perfect as a PDF

One of the most underused features of CSS is print styling. With the right CSS rules, your HTML pages can produce beautiful, professionally formatted PDFs — without any external library.

---

The @media print Rule

Just like @media screen targets monitors, @media print applies styles only when the document is being printed (or saved as PDF).

/* Screen styles */
.sidebar { display: block; }
.nav { background: #333; }

/* Print-only styles — hide nav, show full content */
@media print {
  .sidebar { display: none; }
  .nav { display: none; }
  .ad-banner { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: none; }
}

---

The @page Rule — Controlling Page Size and Margins

The @page CSS rule controls page dimensions, orientation, and margins for the entire document.

@page {
  size: A4 portrait;  /* or: Letter, Legal, A3, A5 */
  margin: 20mm 15mm; /* vertical | horizontal */
}

/* First page gets more top margin for a cover */
@page :first {
  margin-top: 40mm;
}

/* Left and right pages for booklets */
@page :left  { margin-left: 25mm; }
@page :right { margin-right: 25mm; }

---

Page Break Control

Controlling where pages break is essential for professional output.

/* Force a page break before every h1 */
h1 {
  page-break-before: always;
  /* Modern equivalent: */
  break-before: page;
}

/* Never break inside a table row */
tr {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Keep heading with the paragraph below it */
h2, h3 {
  page-break-after: avoid;
  break-after: avoid;
}

/* Keep this element together on one page */
.invoice-summary {
  page-break-inside: avoid;
}

---

Headers and Footers with CSS

You can add repeating page headers and footers using position: running() in modern browsers (supported by WeasyPrint and Paged.js):

@page {
  @top-center {
    content: "Confidential Report — AltoUnlockPDF";
    font-size: 10pt;
    color: #999;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 10pt;
  }
}

For Puppeteer, you pass headers/footers as HTML templates in the pdf() options instead.

---

Showing URLs in Print

Links are invisible in print, but you can make them show their URLs:

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
  /* But don't show internal anchor links */
  a[href^="#"]::after {
    content: "";
  }
}

---

Font and Color Considerations

@media print {
  /* Use points (pt) for print — 1pt = 1/72 inch */
  body {
    font-size: 11pt;
    line-height: 1.5;
    font-family: Georgia, "Times New Roman", serif;
  }

  /* High-contrast black text on white */
  * {
    color: #000 !important;
    background: #fff !important;
  }

  /* Exception: keep colored headings */
  h1, h2 {
    color: #c06020 !important;
  }
}

---

Complete Print Stylesheet Template

Here’s a complete, production-ready print stylesheet:

@media print {
  /* Reset */
  *, *::before, *::after { box-sizing: border-box; }

  /* Page setup */
  @page { size: A4; margin: 20mm 15mm; }
  @page :first { margin-top: 30mm; }

  /* Hide non-print elements */
  nav, header, footer, .sidebar, .ads, .cookie-banner,
  .print-hide, button, form { display: none !important; }

  /* Typography */
  body { font-size: 11pt; line-height: 1.6; color: #000; background: #fff; }
  h1 { font-size: 22pt; page-break-before: always; }
  h2 { font-size: 16pt; page-break-after: avoid; }
  h3 { font-size: 13pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Tables */
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 6pt 8pt; }
  thead { display: table-header-group; } /* repeat header on each page */
  tr { page-break-inside: avoid; }

  /* Images */
  img { max-width: 100%; page-break-inside: avoid; }

  /* Links */
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " [" attr(href) "]"; font-size: 9pt; color: #666; }

  /* Page numbers */
  @page { @bottom-right { content: counter(page); } }
}

---

Testing Your Print Styles

1. In Chrome DevTools, go to the Rendering panel (⋮ menu → More tools → Rendering)
2. Under Emulate CSS media type, select print
3. Your page will reflow with print styles applied — no need to actually print

This is the fastest way to iterate on your @media print CSS.

---

Conclusion

CSS print styles give you precise control over PDF output with no external dependencies. Master @page, page-break-*, and @media print, and your HTML documents will look as good on paper as they do on screen. For a deeper dive, see MDN’s guide to print CSS.