CSS for Print

Even in a digital-first world, print styling remains essential. Whether a user is saving your article as a PDF or printing a receipt, a raw webpage usually looks cluttered on paper. By using Print CSS, you can strip away navigation bars, sidebars, and ads, leaving only the clean, readable content.

1. Defining Print-Specific Styles

There are two main ways to tell the browser which styles are for paper.

Option A: The External File (Best for large projects)

Loading a separate file ensures that print-specific code doesn't clutter your main stylesheet.

Code Block Loading...

Option B: The @media print Block (Best for quick fixes)

This is the most common method. You place your print rules directly inside your existing CSS file.

Code Block Loading...

2. Formatting Links for Paper

On a screen, "Click here" works perfectly. On paper, that link is useless unless the user can see the URL. We can use the CSS content property and the attr() function to automatically display the URL next to the link text.

Code Block Loading...

3. Controlling Page Layout with @page

Physical paper has edges. Use the @page rule to set physical margins using real-world units like centimeters (cm) or inches (in).

Code Block Loading...

4. Managing Page Breaks

To prevent a heading from appearing at the very bottom of a page, or to force a new section to start on a fresh sheet, use page-break properties.

Page Breaks
PropertyDescription
page-break-before: alwaysForces a new page to start before this element.
page-break-after: alwaysForces a new page to start after this element.
page-break-inside: avoidPrevents an element (like an image) from being split across two pages.

Interactive Demo Code

5. How to Debug Print Styles

You don't need to waste paper to see your results. Chrome DevTools allows you to "force" the print view:

  1. Open DevTools (F12).
  2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows).
  3. Type "Rendering" and select "Show Rendering".
  4. Find the "Emulate CSS media type" dropdown and select print.

Key Takeaways

  • Unit Switch: Use pt (points) for font sizes and cm/in for margins when styling for print; they are more accurate for physical media than px.
  • Ink Efficiency: Always remove heavy background colors and images that aren't essential to the content.
  • Link Transparency: Use :after and attr(href) to ensure readers can see where links go.
  • Prevent Splits: Use page-break-inside: avoid on containers (like <p> or <div>) that hold images to prevent them from being sliced in half by the browser.