Print Styles

A print stylesheet is CSS written inside an @media print block that controls how a page looks when printed or saved as a PDF, letting you hide navigation and ads, set page margins, and manage where content breaks across pages.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll be able to give any page a clean printed (and "Save as PDF") version — hiding the nav and ads, setting paper margins, controlling where pages break, and printing link URLs so the paper is actually useful on its own.

What You'll Learn

💡 Think of It Like This

A print stylesheet is like the "export to PDF" filter on a document. Your web page is full of things that only make sense on a screen — a sticky navbar, ads, a cookie banner, a video player, a "Buy now" button. None of that belongs on a sheet of paper.

@media print is the filter that runs the moment someone hits Print. It strips away the digital chrome, flattens the colours so they don't drink ink, and leaves a clean, readable document behind — the same content, dressed for paper instead of for a browser. You write it once, and every printout (or saved PDF) comes out looking professional.

1. The @media print Block

Everything you wrap in @media print { … } applies only when the page is printed or shown in print preview. On screen those rules do nothing, so they can never break your normal layout. The single most important thing print CSS does is hide the chrome : display: none on the nav, ads, and buttons so they don't waste paper.

You can't see print CSS by looking at the page. To check your work, open print preview with Ctrl+P (Windows/Linux) or Cmd+P (Mac) — no paper required.

2. @page — Margins & Paper Size

The @page rule styles the printed sheet itself — its margins and its size . @page { margin: 2cm; } gives every page a 2cm border of white space; size: A4 landscape picks the paper and orientation. Use real print units here — cm , mm , in , or pt — never vh / vw , because a printout has no viewport.

You can even target specific pages: @page :first styles only page one (handy for a bigger top margin on a cover page), and @page :left / :right style even and odd pages for double-sided binding.

3. Page Breaks — Where New Pages Start

On screen content scrolls forever; on paper it has to be sliced into pages, and by default the browser slices wherever it runs out of room — sometimes mid-table or mid-heading. Three properties let you take control: break-before: page forces a new page before an element, break-after: page forces one after , and break-inside: avoid tells the browser "don't split this element across two pages" — perfect for tables, images, and cards.

For the fine detail, orphans and widows set the minimum number of lines a paragraph may leave at the bottom or carry to the top of a page, so you never strand a single lonely line.

4. Printing Link URLs with attr(href)

A link is useless on paper — you can't click it, and "see our report" tells the reader nothing about where to look. The fix is generated content: a::after { content: " (" attr(href) ")"; } . The attr(href) function reads the URL out of the link's markup and prints it in brackets after the text, so the printout shows both the words and the address.

Scope it to a[href^="http"] if you only want to expand external links and leave in-page anchors like #top alone.

5. Backgrounds & print-color-adjust

By default browsers drop background colours and images when printing — it saves ink and keeps text legible on white paper. Most of the time that's exactly what you want, so prefer borders over coloured fills to show structure. But sometimes a background is the point: a coloured invoice header, a code block, a status badge.

To force a background to print, set print-color-adjust: exact (add the -webkit- prefix for Chrome and Safari). It tells the browser "print these colours as I designed them, don't optimise them away." Use it sparingly — only on the few elements that genuinely need their colour.

6. Putting It Together — A Print-Optimised Article

Here's a complete article that uses every idea from this lesson at once: it hides the nav and ads, sets page margins, prints link URLs, keeps the figure whole, forces the references onto a fresh page, and keeps just the one background it needs. Read the comments, then open print preview to see the screen version melt into a clean document.

🎯 Your Turn #1 — Hide the chrome and set margins

This receipt prints with its toolbar and a cramped layout. Add a print block that hides the toolbar and gives the page sensible margins. Fill in the blanks marked ___ , then open print preview and check the comments.

🎯 Your Turn #2 — Show link URLs and protect a table

This report's links print as plain text (no URL) and its table can split across pages. Add generated content to show the URLs and a rule to keep the table whole. Fill in the blanks, then verify in print preview.

🧩 Mini-Challenge — A print-ready invoice from scratch

Support is faded now — only an outline is given. Write the print stylesheet for this invoice yourself. Use the worked examples in sections 1–6 as your reference if you get stuck.

⚠️ Common Errors (and the fix)

• Forgetting to hide the chrome. The printout comes out with the navbar, ads, cookie banner, and buttons, wasting ink and space. Fix: inside @media print , set display: none on every screen-only element (a .no-print class is a handy catch-all).
• Never testing the print styles. Print CSS is invisible in the normal page view, so it's easy to ship rules that don't work. Fix: always check with Ctrl+P / Cmd+P (or emulate the print media type in DevTools) before you trust it.
• Awkward page breaks splitting tables and figures. A table or image gets cut in half across two pages and becomes unreadable. Fix: add break-inside: avoid to those elements, and break-after: avoid on headings to keep them with their text.
• Relying on background colour for meaning. Browsers drop backgrounds when printing, so a coloured "Paid" badge or status box vanishes. Fix: prefer borders and weight for structure; where a colour is essential, opt in with print-color-adjust: exact (plus the -webkit- prefix).
• Burning ink with full-colour text and big images. Bright body text and dark backgrounds drain cartridges and read poorly on white paper. Fix: set text to color: black and remove decorative backgrounds in the print block.
• Using vh / vw units. Print has no viewport, so viewport units behave unpredictably. Fix: size print layouts with cm , mm , in , or pt .

📋 Quick Reference

Goal

Use this

Apply rules only on paper

@media print { … }

Hide screen-only elements

.no-print { display: none; }

Set page margins

@page { margin: 2cm; }

Set paper size / orientation

@page { size: A4 landscape; }

Style the first page only

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

Force a new page before/after

break-before: page; / break-after: page;

Keep an element whole

break-inside: avoid;

Avoid stranded lines

orphans: 3; widows: 3;

Print a link's URL

a::after { content: " (" attr(href) ")"; }

Force a background to print

print-color-adjust: exact;

❓ Frequently Asked Questions

🎉 Lesson Complete

You can now give any page a clean, professional printout. The essentials:

• ✅ @media print applies styles only when printing or in print preview
• ✅ Hide the chrome — nav, ads, buttons — with display: none
• ✅ @page { margin / size } sets paper margins and dimensions; @page :first targets page one
• ✅ break-before / break-after start new pages; break-inside: avoid keeps elements whole
• ✅ a::after { content: attr(href) } prints link URLs so paper is self-contained
• ✅ Backgrounds are dropped by default — use borders, or print-color-adjust: exact to keep the ones that matter

Next up: CSS Performance Optimization , where you'll make your styles render as fast as they look good.

Practice quiz

Continue this course

• Previous: Complex Tables
• Next: Performance

Related lessons

• Responsive Design & Media Queries