CSS Print Styles

Create professional print-ready pages by hiding interactive elements, optimizing typography, controlling page breaks, and ensuring your web content looks great on paper.

PrintMedia QueriesPage LayoutAccessibility

@media print

The @media print query applies styles only when the document is being printed or previewed for printing. Everything inside the block is ignored on screen.

Basic @media print

/* These styles apply ONLY when printing */
@media print {
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}

/* Alternative: link a separate print stylesheet */
<link rel="stylesheet" href="print.css" media="print">

When does @media print apply? It activates when the user prints the page (Ctrl/Cmd + P), uses "Save as PDF", or when you emulate print media in DevTools.

Hiding Elements for Print

Navigation bars, sidebars, buttons, ads, and interactive widgets are useless on paper. Hide them to keep the printout clean.

Hiding UI Elements

@media print {
  /* Hide navigation */
  nav,
  .sidebar,
  .navbar,
  .breadcrumbs {
    display: none !important;
  }

  /* Hide interactive elements */
  button,
  .btn,
  input,
  select,
  textarea {
    display: none !important;
  }

  /* Hide ads and decorative elements */
  .ad,
  .cookie-banner,
  .popup,
  .modal,
  .tooltip,
  video,
  iframe {
    display: none !important;
  }

  /* Hide footer social links but keep copyright */
  .footer-social,
  .share-buttons {
    display: none !important;
  }

  /* Use a utility class for anything that shouldn't print */
  .no-print {
    display: none !important;
  }
}

Showing Print-Only Elements

Sometimes you want content that only appears in print — like a URL notice, page header, or copyright line.

Print-Only Content

/* Hidden on screen, visible when printed */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
}

/* HTML usage: */
<div class="print-only">
  Printed from: https://example.com/article
  Date: March 9, 2026
</div>

Typography for Print

Print works best with serif fonts, point-based sizes, and high-contrast black-on-white text.

Print Typography

@media print {
  body {
    font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
    font-size: 12pt;       /* use pt for print, not px/rem */
    line-height: 1.5;
    color: #000;
  }

  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
  }

  h2 {
    font-size: 18pt;
    margin-top: 18pt;
    margin-bottom: 8pt;
  }

  h3 {
    font-size: 14pt;
  }

  p {
    font-size: 11pt;
    margin-bottom: 8pt;
  }

  /* Keep code blocks readable */
  code, pre {
    font-family: "Courier New", Courier, monospace;
    font-size: 10pt;
    border: 1px solid #ccc;
    padding: 4pt;
  }
}

Why pt instead of px? Points (pt) are a physical unit — 1pt = 1/72 inch. They translate directly to paper dimensions, making your printed text predictable. 12pt is the standard body text size for documents.

Removing Backgrounds & Shadows

Background colors and images waste ink and can make text unreadable when printed. Remove them for clean output.

Clean Print Backgrounds

@media print {
  /* Force white background and black text */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Exception: keep images visible */
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  /* Keep important visual indicators */
  .badge,
  .status-indicator {
    border: 1px solid #000;
    padding: 2pt 6pt;
  }
}

Showing Link URLs with ::after

Links are useless on paper unless the reader can see the URL. Use ::after with attr() to display the href.

Display Link URLs in Print

@media print {
  /* Show the URL after each link */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-style: italic;
    color: #555;
    word-break: break-all;
  }

  /* Don't show URL for anchor links or javascript: */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Don't show URL for links that ARE the URL text */
  a[href]:where([href*="mailto:"])::after {
    content: "";
  }

  /* Similarly show abbreviation expansions */
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
}

How links look in print (simulated)

For more information, visit our documentation (https://docs.example.com/guide) or contact support (https://example.com/support).

The CSS (Cascading Style Sheets) specification is maintained by the W3C.

Page Breaks

Control where page breaks occur to keep related content together and prevent awkward splits.

Page Break Properties

@media print {
  /* Modern properties (recommended) */
  h2, h3 {
    break-after: avoid;      /* don't break right after a heading */
  }

  .chapter {
    break-before: page;      /* always start on a new page */
  }

  img, table, figure, pre {
    break-inside: avoid;     /* don't split across pages */
  }

  blockquote {
    break-inside: avoid;
  }

  /* Legacy properties (still widely supported) */
  .new-page {
    page-break-before: always;
  }

  .keep-together {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* break-before / break-after values:
   auto    — default behavior
   avoid   — avoid breaking here
   page    — force a page break
   left    — force break, next page is a left page
   right   — force break, next page is a right page
*/

@page Rule

The @page rule controls the page itself — margins, size, and named pages for different sections.

@page Configuration

/* Set margins for all pages */
@page {
  margin: 2cm;               /* generous margins for print */
  size: A4;                  /* paper size */
}

/* First page can have different margins */
@page :first {
  margin-top: 4cm;           /* extra top margin on first page */
}

/* Left and right pages (for book-style printing) */
@page :left {
  margin-left: 3cm;          /* binding side margin */
  margin-right: 2cm;
}

@page :right {
  margin-left: 2cm;
  margin-right: 3cm;         /* binding side margin */
}

/* Common paper sizes */
@page { size: A4; }           /* 210mm x 297mm */
@page { size: letter; }       /* 8.5in x 11in */
@page { size: A4 landscape; } /* landscape orientation */
@page { size: 5in 7in; }      /* custom dimensions */

Widows & Orphans

Widows and orphans control the minimum number of lines at the top/bottom of a page, preventing awkward single lines.

Widows & Orphans

@media print {
  p {
    orphans: 3;   /* min lines at BOTTOM of a page (before break) */
    widows: 3;    /* min lines at TOP of a page (after break) */
  }
}

/* orphans: If a paragraph would leave fewer than 3 lines
   at the bottom of a page, the entire paragraph moves to
   the next page instead.

   widows: If a paragraph would have fewer than 3 lines
   at the top of a new page, the break is adjusted so
   at least 3 lines appear on the new page. */

Widows & Orphans Visualized

Bad: Orphan (1 line left behind)

...end of previous content. This lonely line is an orphan.

The rest of the paragraph continues on the next page with plenty of room.

Good: orphans: 3 (at least 3 lines)

...end of previous content. At least three lines remain on this page before the break to keep things readable.

The paragraph continues naturally on the next page.

Complete Print Stylesheet Template

A production-ready print stylesheet you can copy and adapt for any project.

Complete Print Stylesheet (ready to copy)

/* ==========================================
   PRINT STYLESHEET
   ========================================== */

@media print {

  /* --- Page Setup --- */
  @page {
    margin: 2cm;
    size: A4;
  }

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

  /* --- Base Reset --- */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* --- Typography --- */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 { font-size: 24pt; margin-bottom: 12pt; }
  h2 { font-size: 18pt; margin: 18pt 0 8pt; }
  h3 { font-size: 14pt; margin: 14pt 0 6pt; }
  p  { orphans: 3; widows: 3; }

  /* --- Hide UI Elements --- */
  nav,
  .sidebar,
  .navbar,
  .header,
  .footer,
  button,
  .btn,
  .no-print,
  .ad,
  .cookie-banner,
  .modal,
  video,
  iframe,
  .social-share {
    display: none !important;
  }

  /* --- Show print-only content --- */
  .print-only {
    display: block !important;
  }

  /* --- Links: show URL --- */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-style: italic;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

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

  /* --- Page Breaks --- */
  h1, h2, h3 {
    break-after: avoid;
  }

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

  .page-break {
    break-before: page;
  }

  /* --- Tables --- */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 6pt 8pt;
  }

  thead {
    display: table-header-group;  /* repeat header on every page */
  }

  /* --- Code blocks --- */
  pre, code {
    font-family: "Courier New", monospace;
    font-size: 10pt;
    border: 1px solid #ddd !important;
    padding: 4pt 6pt;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* --- Layout: single column --- */
  .main,
  .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
}

Testing with DevTools

You don't need to actually print a page to test print styles. Every major browser has a print media emulator built in.

Testing Print Styles

/* Chrome / Edge DevTools:
   1. Open DevTools (F12)
   2. Press Ctrl+Shift+P (Command Palette)
   3. Type "rendering"
   4. Select "Show Rendering"
   5. Scroll to "Emulate CSS media type"
   6. Select "print"

   Firefox DevTools:
   1. Open DevTools (F12)
   2. Click the "Toggle print media simulation" button
      in the Inspector toolbar (small page icon)

   Safari:
   1. Open Web Inspector
   2. Elements tab → toggle "Force Print Media Styles"

   Or simply use Ctrl/Cmd + P to open Print Preview */

Quick test: Press Ctrl + P (or Cmd + P on Mac) to instantly see how your page looks in print preview. This is the fastest way to check your print styles.

Gotchas

Background colors/images don't print by default. Most browsers have "Background graphics" unchecked by default in print settings. Never rely on background colors to convey meaning in print — use borders instead.

Flexbox and Grid layout can cause issues in print. Some print renderers struggle with complex flex/grid layouts. For print, consider resetting to simple block layout with display: block; float: none; width: 100%;.

position: fixed elements appear on EVERY page. Fixed-position elements repeat on each printed page, overlapping content. Always hide or unfixed them in print styles.

!important is often necessary in print styles. Print styles typically need to override specific screen styles, so !important is acceptable here — this is one of the few legitimate use cases.

break-inside: avoid doesn't work on all elements. Some browsers only support it on block-level elements. If it's not working on a flex/grid child, wrap the content in a block container.

Pro Tips

Use thead { display: table-header-group; } to repeat table headers on every printed page. This makes long tables much easier to read across pages.

Add a print-only header with page info. Include the document title, URL, and print date in a .print-only element so printed pages are self-documenting.

Test in actual Print Preview, not just media emulation. DevTools media emulation doesn't simulate page breaks, @page rules, or widows/orphans. Always do a final check with Ctrl+P.

Consider a separate print stylesheet file. For complex sites, use <link rel="stylesheet" href="print.css" media="print"> instead of @media print blocks. This keeps your main CSS clean and avoids downloading print styles on mobile.

Use cm or mm for @page margins. These physical units map directly to paper dimensions. A margin of 2cm is standard for most documents. Use 2.5-3cm for bound documents to allow for the binding gutter.

PreviousScrollbar Styling NextArchitecture & Best Practices