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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary