FSM Full Stack Masterclass
Platform under construction
CSS course badge

Production CSS

Production

Print CSS

Print CSS prepares a page for paper, PDFs and browser print dialogs. It strips noise and preserves useful content.

@media print {
  nav, .button { display: none; }
  body { background: white; color: black; }
}

Production mental model

A printed page should contain the content, not the interface chrome.

Users still print pages, save PDFs, share course notes and keep invoices or checklists. A screen design rarely prints well by accident.

Print CSS lets you remove navigation, heavy backgrounds, sticky elements and decorative motion while keeping headings, text, links and useful details.

Good print CSS is not about making paper beautiful first. It is about making paper readable and complete.

Hide chrome

Navigation, buttons and sticky UI usually do not belong on paper.

Show links

Printed links should reveal their destination when useful.

Breaks

Avoid splitting important blocks awkwardly.

Ink

Remove dark backgrounds and heavy decorative color.

Visual model

See the release risk before shipping the CSS.

Screen

Full UI

Navigation, buttons and dark surfaces support interaction.

Print

@media print

CSS switches to paper-friendly rules.

Clean

Content first

Text and headings remain clear.

PDF

Shareable

The result works outside the browser.

Good CSS versus fragile CSS

Useful print stylesheet

@media print {
  nav, .button, .sidebar { display: none; }
  body { background: white; color: black; }
  a[href]::after { content: " (" attr(href) ")"; }
  article { break-inside: avoid; }
}

Screen CSS forced onto paper

body { background: #07111f; color: white; }
.hero { min-height: 100vh; }
.sticky-nav { position: sticky; top: 0; }

Rules of thumb

Production CSS should be usable, fast, tested and repeatable.

Remove interaction-only UI

Buttons, nav bars, sticky controls and forms often print as clutter.

Return to readable colors

White paper and black text are often the cleanest baseline.

Reveal useful URLs

Printed links need visible destinations when the link matters.

Control page breaks

Use break-inside and break-before to keep important blocks together.

Avoid huge hero sections

Screen drama can waste an entire printed page.

Print test real pages

Use the browser print preview before claiming it works.

Production thinking

The release is not finished until the edge cases are checked.

Why does this matter?

Print CSS respects a different use case: reading, archiving and sharing content outside the interactive website.

Accessibility

Readable print output helps people who prefer paper, PDFs, larger text or offline review.

Production note

At minimum, test print output for course lessons, invoices, legal pages, documentation and checklists.

SEO note

Print CSS does not rank directly, but useful documents improve trust and content quality.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Hide the link in print and explain why that may remove useful information.
  • Add break-inside: avoid to the article.
  • Remove dark backgrounds only inside @media print.

Practice assignment

Do this before moving to the next lesson.

  1. Open print preview for one content page.
  2. List three pieces of UI that should not print.
  3. Write a small @media print block that improves readability.

Try it yourself

Create a paper-friendly article

Live preview

Self-check

Before you continue, prove that you understand Print CSS.

Production

Answer these questions before moving on. Production CSS is not about writing more rules; it is about proving the rules survive real use.

  1. Can you write @media print?
  2. Can you hide interaction-only interface elements?
  3. Can you make links useful on paper?
  4. Can you avoid wasting pages with screen-only hero styles?
  5. Can you test print preview before release?

Senior audit upgrade

Print CSS has page rules too.

Printing is its own output mode. Use @page, break rules and URL hints when the content may be printed or saved as PDF.

@page

Control print margins where supported.

Breaks

Use break-before, break-after and break-inside to avoid ugly splits.

URLs

For printed documents, consider showing link URLs after link text.

@media print {
  a[href]::after { content: ' (' attr(href) ')'; }
  .card { break-inside: avoid; }
}

@page { margin: 16mm; }