CSS print Media Type

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS print media type for paper and print preview examples
Definition

Definition and Usage

The print media type targets paged material and documents shown in print preview. Put print-only rules inside @media print { … }.

Typical uses: hide navigation and ads, set paper-friendly fonts and colors, and control page breaks. Screen layout stays under screen (or the default).

Standard-track.

Baseline widely available for decades. Not deprecated, experimental, or non-standard.

Deprecated types MQ4

Do not use tty, tv, projection, handheld, braille, embossed, or aural—deprecated in Media Queries Level 4.

Syntax

CSS Syntax

syntax.css
@media print { … }

You can also load a separate sheet with <link rel="stylesheet" media="print" href="print.css">.

Patterns

Common Patterns

print is a media type (no feature values). These are the patterns students use most:

PatternDescriptionTry it
Hide chromeRemove nav / chrome from printed pagesTry it
.no-printReusable class to hide buttons and sidebarsTry it
Page breaksKeep headings and tables from splitting badlyTry it
Link URLsShow href after links on paperTry it
Approach

How to Use print

Design for screen first, then add a lean print block.

  1. Keep the article readable with defaults that work on screen.
  2. Add @media print and hide nav, sidebars, and interactive chrome.
  3. Set paper-friendly colors (dark text, light background) and a readable pt font size.
  4. Tune page breaks for headings, figures, and tables; test with print preview.
GoalTypical rule
Hide UI chromenav, .sidebar { display: none; }
Readable typebody { font-size: 12pt; color: #000; }
Keep blocks togethertable { break-inside: avoid; }
Screen + print shared@media screen, print { … }
Try it

Live Preview

matchMedia("print") is usually false on screen and true in print preview. Use Simulate to preview styles here.

Detected type
Result
Code

CSS Examples

Each snippet focuses on @media print. Use Try It Yourself for a live editor. View Output shows a simulated print look.

Example 1 — Hide Navigation When Printing

Remove the navbar so only the article reaches the page.

CSS
<style>
  @media print {
    .navbar {
      display: none;
    }

    body {
      font-size: 12pt;
      color: #000;
    }
  }
</style>

<div class="navbar">My Website</div>
<main>
  <h1>Content to Print</h1>
  <p>Press Ctrl+P to preview.</p>
</main>
Try It Yourself

How It Works

  1. Open the print query. @media print runs only for print / preview.
  2. Hide chrome. display: none on .navbar removes it from the page.
  3. Tune type. 12pt and black text read well on paper.
  4. On screen. Outside the query, the navbar stays visible.

Example 2 — Reusable .no-print Class

Mark any element that should never appear on paper.

CSS
<style>
  @media print {
    .no-print {
      display: none !important;
    }
  }
</style>

<h1>Article Title</h1>
<p>This paragraph prints.</p>
<button class="no-print">Share</button>
Try It Yourself

How It Works

  1. Define one rule. Inside @media print, hide .no-print.
  2. Tag UI. Put the class on buttons, sidebars, and share widgets.
  3. Keep content. Unmarked paragraphs and headings still print.
  4. Reuse. One class covers every chrome element you add later.

Example 3 — Show Link URLs on Paper

Printed pages cannot be clicked—append the address after the link text.

CSS
<style>
  @media print {
    a[href]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
    }
  }
</style>

<p>Visit our <a href="https://codetofun.com">homepage</a>.</p>
Try It Yourself

How It Works

  1. Target links. a[href]::after runs only when an href exists.
  2. Print only. The rule lives inside @media print.
  3. Insert the URL. attr(href) copies the address into generated text.
  4. On screen. Links stay clean with no extra URL text.

Edge Cases & Pitfalls

If print output looks wrong, check these first.

preview

Test in print preview

Screen layout is not print. Always open Ctrl+P / Cmd+P before shipping.

backgrounds

Backgrounds may be stripped

Many browsers omit background colors and images unless the user enables them. Prefer dark text on a light page.

breaks

Prefer modern break properties

Prefer break-before, break-after, and break-inside; page-break-* remain widely supported aliases.

paged

Print is paged media

Pair with overflow-block ideas and page margins via @page when you need paper size control.

type

Type vs feature

print names the medium. Features like orientation refine it: @media print and (orientation: landscape).

Compatibility

Browser Support

print is a browser CSS media type for paged output and print preview. Node.js, Deno, and Bun do not evaluate it.

✓ Baseline · Widely available for decades

print

Supported in Chrome 1+, Firefox 1+, Safari 1.3+, Edge 12+, Opera 9.2+, IE 6+. Universal for production print stylesheets.

99% Global support
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1.3+
Full support
Microsoft Edge 12+
Full support
Opera 9.2+
Full support
Samsung Internet 1+
Full support
Internet Explorer 6+
Full support
print Universally supported

Bottom line: Safe for every production site. Always verify layout in the browser print preview.

Remember

Key Takeaways

  • Role: print styles paged output and print preview—not everyday screen UI.
  • Common use: hide nav/ads, set readable type, append link URLs.
  • vs screen: put paper rules in print; keep interactive layout under screen.
  • Pitfall: never ship without checking print preview.

One line: use @media print to strip chrome and tune type for paper—test with Ctrl+P.

Frequently Asked Questions

It targets paged output. Rules inside @media print apply when the document is printed or opened in print preview (Ctrl+P / Cmd+P).
print is a media type (the output medium). Features like width or pointer describe device capabilities. You can combine them: @media print and (orientation: landscape).
Hide navigation, sidebars, ads, buttons, and cookie banners. Keep the main article, headings, and essential data.
Open print preview with Ctrl+P or Cmd+P. The preview uses @media print. You can also use matchMedia("print") in JavaScript.
No. Media Queries Level 4 deprecated tty, tv, projection, handheld, braille, embossed, and aural. Prefer print, screen, and all.
All major browsers for decades: Chrome 1+, Firefox 1+, Safari 1.3+, Edge 12+, IE 6+. It is a browser CSS media type, not a Node.js API.

Next: resolution

Query device pixel density for sharper assets and print-quality images.

resolution tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS pointer Media Feature CSS resolution Media Feature