CSS Print Styles

Create print-friendly pages with @media print, @page rules, page breaks, and ink-saving techniques for professional document output.

Overview

Print CSS gives users a clean, formatted document when they print or export to PDF. The core is a @media print block that overrides screen styles: ```css @media print { /* Hide navigation, ads, sidebars */ nav, .sidebar, .ad, .cookie-banner { display: none !important; } /* Ensure text is black on white for ink efficiency */ body { color: #000; background: #fff; font-size: 12pt; } /* Expand links to show URLs */ a[href]::after { content: " (" attr(href) ")"; } } ``` **@page rule for margins and page size:** ```css @page { size: A4 portrait; margin: 2cm; } @page :first { margin-top: 3cm; /* extra top margin on first page */ } ``` **Page break controls:** ```css .chapter { break-before: page; } .keep-together { break-inside: avoid; } .no-break-after { break-after: avoid; } ```

Key Points

•@media print targets printed output and PDF export
•Always set color: black and background: white for ink efficiency
•@page controls page size, margins, and page-specific styles
•break-before: page forces an element to start on a new page
•break-inside: avoid prevents a block from splitting across pages
•Use pt units for print (1pt = 1/72 inch) and cm/mm for margins
•a[href]::after with content: attr(href) expands links so URLs are visible in print
•widows and orphans properties control minimum lines at the top/bottom of a page break

Examples

Foundation print stylesheet

@media print {
  /* 1. Reset colors */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* 2. Hide interactive and decorative elements */
  nav,
  header .nav,
  .sidebar,
  .cookie-banner,
  .ad,
  button:not(.print-show),
  [aria-label="site navigation"],
  .no-print {
    display: none !important;
  }

  /* 3. Main content full-width */
  body {
    font-size: 12pt;
    line-height: 1.5;
    font-family: Georgia, "Times New Roman", serif;
  }

  main,
  article,
  .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* 4. Show link URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: ""; /* skip internal and JS links */
  }
}

@page rule and page breaks

@page {
  size: A4 portrait;
  margin: 2.5cm 2cm;
}

@page :first {
  margin-top: 4cm; /* title page: extra top space */
}

@page :left {
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
}

@media print {
  /* Chapter headings start on a new page */
  h1 {
    break-before: page;
    margin-top: 0;
  }

  /* Tables, figures, and code blocks should not split */
  table,
  figure,
  pre,
  blockquote,
  .keep-together {
    break-inside: avoid;
  }

  /* Headings should not be the last line on a page */
  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  /* Control orphans and widows */
  p {
    orphans: 3;
    widows: 3;
  }
}

Printing tables and code

@media print {
  /* Make tables print-friendly */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #999;
    padding: 6pt 8pt;
    text-align: left;
    font-size: 10pt;
  }

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

  tfoot {
    display: table-footer-group;
  }

  /* Code blocks: wrap instead of overflow */
  pre,
  code {
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid #ccc;
    padding: 8pt;
    font-size: 9pt;
    background: #f5f5f5 !important;
    color: black !important;
  }
}

display: table-header-group on thead causes the header row to repeat at the top of each printed page for long tables.

Print-specific layout and branding

/* Show print header and footer (hidden on screen) */
.print-header,
.print-footer {
  display: none;
}

@media print {
  .print-header {
    display: block;
    text-align: center;
    border-bottom: 2pt solid black;
    padding-bottom: 12pt;
    margin-bottom: 24pt;
  }

  .print-footer {
    display: block;
    text-align: center;
    border-top: 1pt solid #999;
    margin-top: 24pt;
    padding-top: 8pt;
    font-size: 9pt;
    color: #555 !important;
  }

  /* Page numbers using CSS counters */
  @page {
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 9pt;
    }
  }
}

Common Mistakes

Not hiding navigation, sidebars, and footers in print styles, causing layout elements to consume paper
Forgetting to set background: white !important causing dark backgrounds to print (wasting ink)
Using px units for font sizes in print (use pt, 12pt is readable, 10pt is small but usable)
Not testing print CSS by using browser Print Preview before deploying

Note

Add a .no-print class and apply it in HTML to any element you never want printed. In your print stylesheet, .no-print { display: none !important; } is the simplest and most maintainable approach.

CSS Print Styles

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does break-inside: avoid do in print CSS?