Print Stylesheets & Export-Friendly Layouts
Lesson 43 • Advanced Track
What You'll Learn
- Write @media print stylesheets for clean printed pages
- Hide navigation, ads, and interactive elements in print
- Show link URLs using CSS generated content (::after)
- Control page breaks with break-before, break-after, break-inside
- Use @page rules for margins, page size, and first-page styling
- Build print-ready documents like invoices and reports
💡 Real-World Analogy
A print stylesheet is like a PDF export filter. You wouldn't print a webpage with the sidebar, cookie banner, and animated background. @media print strips away the digital chrome and leaves clean, readable content — like converting a website into a professional document.
Understanding Print CSS
Print stylesheets are one of the most overlooked features in web development, but they're essential for professional websites. Invoices, reports, receipts, articles, and legal documents all need to look good when printed. Without a print stylesheet, users get the navigation bar, ads, cookie consent banners, and all the interactive elements — wasting ink and making the printout unreadable.
The @media print block works exactly like any other media query — the rules inside only apply when the page is being printed (or previewed in print mode). You can test print styles without wasting paper by using your browser's Print Preview (Ctrl+P on Windows, Cmd+P on Mac).
Beyond hiding elements, print CSS gives you control over page breaks (where new pages start), page margins (the @page rule), and even generated content (showing link URLs inline with a::after). Professional print stylesheets also handle widows and orphans — preventing single lines from appearing alone at the top or bottom of a page.
1. Basic Print Stylesheet
This example hides the navigation bar, converts colors to black for ink savings, shows link URLs inline, removes decorative backgrounds, and sets page margins with @page.
Basic Print-Optimised Page
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
.navbar { background: #1976D2; color: white; padding: 16px 24px; border-radius: 8px; margin-bottom: 24px; display: flex; justify-content: space-between; }
.content { max-width: 700px; }
h1 { color: #1565C0; }
p { line-height: 1.8; color: #444; }
a { color: #1976D2; }
.info-box { background: #E3F2FD; padding: 16px; border-radius: 8px; border-left: 4px solid #1976D2; margin: 16px 0; }
table { width: 100
...2. Page Break Control
Multi-page documents need explicit control over where pages break. Use break-before: page to force a new page, break-inside: avoid to keep elements together, and orphans/widows to control minimum line counts at page boundaries.
Page Breaks & Multi-Page Reports
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h1 { color: #1565C0; }
h2 { color: #333; margin-top: 32px; }
p { line-height: 1.8; color: #555; }
.page-section { margin-bottom: 32px; padding: 24px; border: 2px dashed #e0e0e0; border-radius: 8px; }
.page-section h2 { margin-top: 0; }
.label { display: inline-block; background: #E3F2FD; color: #1565C0; padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-bottom: 12px; }
...3. Printable Invoice
A real-world example: a professional invoice designed to look great both on screen and when printed. The print button hides itself in print mode. The layout uses CSS Grid for addresses and is designed at standard document width.
Professional Printable Invoice
<!DOCTYPE html>
<html><head><style>
* { margin: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; padding: 40px; max-width: 800px; margin: 0 auto; color: #333; }
.invoice-header { display: flex; justify-content: space-between; margin-bottom: 40px; }
.company { font-size: 1.8rem; font-weight: 800; color: #1976D2; }
.company-details { font-size: 0.85rem; color: #999; margin-top: 4px; }
.invoice-meta { text-align: right; }
.invoice-meta h2 { font-size: 1.5rem; color: #1976D2;
...4. Print CSS Cheat Sheet
A comprehensive reference of all print-related CSS properties, @page rules, and best practices. Use this as a quick-reference when building print stylesheets for your projects.
Print CSS Reference & Tips
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h1 { color: #1565C0; }
h2 { margin-top: 24px; }
.tip { padding: 16px; border-radius: 8px; margin: 12px 0; }
.tip-good { background: #E8F5E9; border-left: 4px solid #4CAF50; }
.tip-bad { background: #FFEBEE; border-left: 4px solid #F44336; }
code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
pre { background: #263238; color: #e0e0e0; padding: 16px; border-radius: 8px;
...When to Use Print Styles
- Invoices & Receipts: E-commerce, SaaS, freelancer platforms — any app that generates documents users need to print or save as PDF.
- Reports & Dashboards: Analytics platforms where users export data summaries for meetings or presentations.
- Articles & Blog Posts: News sites and blogs should have clean print layouts — many users print articles to read offline.
- Legal Documents: Terms of service, contracts, and compliance documents that users may need to print for records.
Common Mistakes
- Forgetting to test — Always check with Ctrl+P / Print Preview. Print CSS is completely invisible otherwise.
- Using vh/vw units in print — Print has no viewport. Use
cm,mm,in, orptfor print-specific sizing. - Not hiding interactive elements — Buttons, forms, video players, and chat widgets are useless on paper. Hide them all.
- Relying on background colors — Most browsers don't print backgrounds by default (to save ink). Use borders instead.
- No break-inside: avoid on tables — Without this, a table can split across pages, making it unreadable.
- Forgetting link URLs — A printed "Click here" link is useless without showing the URL. Use
a::aftercontent generation.
🎉 Lesson Complete
- ✅
@media printapplies styles only when printing or in print preview - ✅ Hide nav, ads, and buttons with
display: none !important - ✅
a::after { content: " (" attr(href) ")" }shows link URLs on paper - ✅
@page { margin: 2cm }controls page margins;@page :firsttargets page 1 - ✅
break-before: pageforces a new page;break-inside: avoidkeeps elements whole - ✅
orphans: 3; widows: 3prevents lone lines at page boundaries - ✅ Use borders instead of backgrounds — browsers don't print backgrounds by default
- ✅ Next lesson: CSS Performance Optimization
Sign up for free to track which lessons you've completed and get learning reminders.