CSS @media Print: Style Web Pages for Printing

The CSS @media print rule enables developers to apply dedicated styles to web pages specifically when they are sent to a printer or exported as a PDF. By modifying layouts, typography, and visibility, this feature transforms interactive, screen-optimized digital designs into clean, readable, and ink-efficient physical documents. This guide outlines how to implement @media print, remove clutter, adjust colors, format links, and manage page breaks for optimal print results.

Implementing Print Stylesheets

Print styles can be applied in two primary ways: within an existing stylesheet using an @media print at-rule block, or by linking a standalone stylesheet specifically for print media in the HTML <head>.

Within an existing CSS file:

@media print {
  /* Print-specific styles go here */
}

Via an HTML <link> tag:

<link rel="stylesheet" href="print.css" media="print">

Removing Non-Essential Elements

Websites contain interactive components—such as navigation bars, search forms, sidebars, cookie notices, and advertisements—that serve no purpose on physical paper and waste ink. You can remove these by targeting their classes or elements with display: none;.

@media print {
  nav, footer, sidebar, .ad-banner, .btn-action {
    display: none !important;
  }

  main, article {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

Optimizing Typography, Colors, and Backgrounds

Screens support vibrant colors and dark modes, but physical printing requires high contrast and minimal ink consumption. Set backgrounds to pure white and body text to dark gray or black.

@media print {
  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
    line-height: 1.5;
  }
}

Browsers often disable background images and colors by default to save ink. If certain backgrounds are essential, such as colored table headers, enforce their rendering with print-color-adjust:

.highlight-box {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

Revealing Hyperlink URLs

On paper, hyperlinks cannot be clicked. You can use the CSS ::after pseudo-element and the attr() function to display the actual target destination URL next to the link text.

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    color: #555555;
  }

  /* Exclude internal anchor links or javascript links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Controlling Page Breaks

One common issue with printing web content is awkward pagination, such as a headline appearing at the bottom of a page while its related paragraph appears on the next. Modern CSS provides fragmentation properties to manage where pages split.

• break-inside: avoid;: Prevents elements like images, code blocks, or tables from splitting across two pages.
• break-after: avoid;: Keeps section headers attached to the subsequent content.
• break-before: always;: Forces a new section or chapter to begin at the top of a fresh sheet.

@media print {
  h1, h2, h3 {
    break-after: avoid;
  }

  img, table, blockquote, pre {
    break-inside: avoid;
  }

  .chapter-start {
    break-before: always;
  }
}

Configuring Margins with the @page Rule

To define the physical page dimensions and margin widths of the printed paper, pair @media print with the @page at-rule.

@page {
  size: A4 portrait;
  margin: 20mm;
}

Using these techniques guarantees that digital web content seamlessly transitions into structured, readable, and professional paper documents.