CSS print Media Type

What You’ll Learn

The print media type lets you apply CSS only when a page is printed or viewed in print preview. Create clean, paper-friendly layouts by hiding chrome and tuning typography.

Introduction

Screen styles often include dark headers, floating sidebars, and large buttons — great for browsing, wasteful on paper. When users press Ctrl+P (or Cmd+P on Mac), the browser switches to the print media type and applies your print-specific CSS.

Unlike media features such as min-width or pointer, print is a media type that describes the output medium itself.

Definition and Usage

Wrap rules in @media print { } to target printed output. Hide navigation, use readable font sizes in pt, set black text on white backgrounds, and control page breaks for long articles.

📝 Syntax

Use the print keyword as the media type:

@media print {
  /* Styles for printed output only */
}

/* Shorthand — same as above */
@media print {
  .no-print {
    display: none;
  }
}

Common Media Types

• screen — Computer and phone displays (the default browsing context).
• print — Printed pages and print preview.
• all — All media types (use sparingly).
• speech — Screen readers and speech synthesizers.

print vs screen

print vs overflow-block: paged

Basic Example

@media print {
  .navbar {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

Default Value

If you define no @media print rules, the browser prints using your screen styles. That often wastes ink on dark backgrounds and navigation bars.

Syntax Rules

• Use pt (points) or in (inches) for print typography instead of px or vw.
• Prefer black text on white: color: #000; background: #fff;
• Hide with display: none or a reusable .no-print class.
• Control breaks: page-break-before, page-break-after, page-break-inside: avoid.
• Combine types and features: @media print and (min-width: 5in) { }.

Related Topics

• overflow-block — paginated block-axis overflow
• display property — hide elements with none
• color property — set print text color

When to Use print

Reach for @media print when paper output matters:

• Articles and recipes — Let users print clean content without site chrome.
• Invoices and receipts — Format transactional pages for paper records.
• Documentation — Provide readable technical docs without sidebars.
• Reports and tables — Control page breaks so tables do not split awkwardly.
• Legal pages — Ensure terms and privacy policies print legibly.

Examples Gallery

Practice print with navbar hiding, no-print classes, page breaks, and link URL expansion.

.navbar {
  background: #1e293b;
  color: #fff;
  padding: 0.75rem;
}

@media print {
  .navbar {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

@media print {
  .no-print {
    display: none !important;
  }
}

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

  article, figure, table {
    page-break-inside: avoid;
  }
}

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

🛠 Usage Tips

• Test with Print Preview — Always verify with Ctrl+P before shipping print styles.
• Use pt for fonts — 12pt body and 14–18pt headings read well on paper.
• Strip backgrounds — Save ink by removing dark backgrounds and box shadows.
• no-print utility — One reusable class is easier than many one-off selectors.
• Combine with @page — Set margins with @page { margin: 2cm; } inside print blocks.

⚠️ Common Pitfalls

• Expecting screen preview — Print styles only appear in Print Preview, not on the normal page.
• Calling it a property — print is a media type, not a CSS property.
• Printing dark themes — Dark backgrounds waste ink and reduce contrast on paper.
• Forgetting buttons — Hide interactive controls that are useless on paper.
• Absolute positioning — Fixed and sticky elements often print incorrectly; hide or reset them.

♿ Accessibility

• Readable contrast — Black on white provides the best print legibility.
• Do not rely on color alone — Printed pages are often grayscale; use text labels too.
• Preserve content — Hide chrome, not the main article or data users need.
• Link URLs — Show href values so printed references remain useful.
• Font size — Avoid fonts smaller than 10pt for body text.

💡 Best Practices

Related Topics