Print Stylesheet with @media print

Creating a Print Stylesheet

The @media print query applies styles only when the page is being printed or saved as PDF. A well-crafted print stylesheet improves the reading experience on paper and saves ink.

The Query

@media print {
  /* Print-only styles */
}

Essential Print Overrides

@media print {
  /* Hide non-essential elements */
  nav, footer, .sidebar, .ads, .no-print,
  button, .cookie-banner { display: none !important; }

  /* Reset backgrounds and colors */
  body { background: white !important; color: black !important; }

  /* Full-width content */
  .container { max-width: 100%; margin: 0; padding: 0; }

  /* Show URLs for links */
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }

  /* Prevent element breaks */
  h1, h2, h3 { page-break-after: avoid; }
  img, table, figure { page-break-inside: avoid; }

  /* Ensure text is readable */
  body { font-size: 12pt; line-height: 1.5; }
}

Page Margin Control

Use the @page at-rule inside your print query to control margins:

@media print {
  @page { margin: 2cm; }
  @page :first { margin-top: 3cm; }
}

Testing Print Styles

In Chrome DevTools, open the Rendering panel and set "Emulate CSS media type" to "print". This lets you see print styles without actually printing.