📚 Theory: Print Stylesheets
What Is a Print Stylesheet?
A print stylesheet uses @media print to apply CSS only
when the user prints the page (or saves as PDF).
Why You Need One
- Users want content, not navigation menus or ads
- Dark backgrounds waste ink (or don't print at all)
- Links should show their full URL
- Control where page breaks occur
/* Print styles - apply when printing */ @media print { /* Hide
navigation and ads */ nav, .advertisement, .sidebar { display: none; }
/* Ensure black text (save ink) */ body { color: black; background:
white; } /* Show URLs after links */ a[href]:after { content: " ("
attr(href) ")"; } }
The Art of CSS Print Stylesheets
Published on May 14, 2026 | By Mouad | 5 min read
Introduction
When users print a webpage, they typically want just the content — not
the navigation menu, not the ads, not the sidebar. With a print
stylesheet, you can give them exactly that.
In this article, we'll explore how to create print-friendly web pages
using @media print.
What Print Styles Can Do
Here are the most useful print CSS techniques:
-
Hide elements:
display: none on
navigation, ads, and footers
-
Show link URLs:
a[href]:after { content: " (" attr(href) ")"; }
-
Force black text: Save ink by removing colored
backgrounds
-
Control page breaks:
page-break-before: always or
page-break-inside: avoid
-
Set paper size:
size: A4 or
size: letter
🎉 Special Offer! 50% off all courses — Use code: PRINT50
Controlling Page Breaks
One of the most important aspects of print CSS is controlling where
page breaks occur.
/* Avoid breaking inside headings */ h1, h2 { page-break-after: avoid;
} /* Avoid breaking inside paragraphs or images */ p, figure {
page-break-inside: avoid; } /* Force a page break before a section */
.section-break { page-break-before: always; }
Conclusion
Print stylesheets are often overlooked but they provide a better
experience for users who need to print your content. A few lines of
CSS can make the difference between a frustrating printout and a
professional-looking document.
For more information, check out the
MDN documentation on media queries.
⚡ Print Stylesheet Reference
/* =================================== BASIC PRINT STYLESHEET TEMPLATE
=================================== */ @media print { /* 1. Reset
everything for print */ * { background: transparent !important; color:
black !important; box-shadow: none !important; text-shadow: none
!important; } /* 2. Hide non-essential elements */ nav, .sidebar,
.advertisement, .footer, .comments { display: none; } /* 3. Show link
URLs */ a[href]:after { content: " (" attr(href) ")"; font-size: 90%;
} /* 4. Don't show URLs for internal links */ a[href^="#"]:after {
content: ""; } /* 5. Page breaks */ h1, h2 { page-break-after: avoid;
} p, li, figure { page-break-inside: avoid; } /* 6. Set paper size
(optional) */ @page { size: A4; margin: 2cm; } } /*
=================================== COMMON PRINT PROPERTIES
=================================== */ display: none; /* Hide elements
*/ page-break-before: always; /* Force page break before element */
page-break-after: avoid; /* Avoid page break after element */
page-break-inside: avoid; /* Avoid page break inside element */ size:
A4; /* Set paper size */