Use @media print query to create print-specific styles
Hide screen-only elements like navigation, ads, and toolbars from printed output
Optimize typography for print with appropriate fonts, sizes, and line-height
Handle color considerations including background colors and text contrast
Control page margins and sizing with the @page at-rule
Prevent awkward page breaks using page-break-inside and break-inside
Display hyperlink URLs in printed documents for reference
Apply common print patterns and best practices for professional documents
Introduction to Print Stylesheets
Print stylesheets allow you to control how web pages appear when printed or saved as PDF. While users increasingly consume content digitally, printing remains important for reports, invoices, resumes, and documents that require physical copies or archival. Without print styles, web pages print with all their screen decorations—navigation bars, advertisements, colorful backgrounds—wasting ink and paper while producing unprofessional results.
CSS provides the @media print media query specifically for print styles. Rules inside this query only apply when printing, leaving screen display unaffected. This separation allows you to optimize for both mediums without compromise: rich, interactive designs on screen and clean, readable documents on paper.
The @media print Query
The foundation of print stylesheets is the @media print media query. Any CSS rules placed inside this query apply only when the document is printed or viewed in print preview. This keeps print styles completely separate from screen styles.
/* Screen styles - normal CSS */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
}
/* Print styles - only when printing */
@media print {
body {
background: white;
color: black;
padding: 0;
}
}
In the example above, the body has a colorful gradient background on screen but prints with a plain white background. This saves ink while maintaining readability. The print query overrides screen styles with higher specificity for the print context.
Hiding Screen-Only Elements
Most web pages contain elements that make sense on screen but are useless or distracting when printed: navigation menus, sidebars, advertisements, social media buttons, and interactive widgets. Print stylesheets should hide these elements to focus on the core content users actually want to print.
The !important flag ensures these elements are hidden even if they have inline styles or high-specificity selectors. This is one of the few cases where !important is justified, as print styles must override screen styles reliably.
Typography for Print
Typography requirements differ between screen and print. Screens use sans-serif fonts for clarity at low resolutions, but print benefits from serif fonts that guide the eye across the page. Font sizes should be specified in points (pt), a physical unit that translates consistently to paper regardless of screen resolution or print settings.
The example uses Georgia, a highly readable serif font, with 12pt body text—the standard for printed documents. Line-height increases slightly to 1.6 for comfortable reading on paper. The orphans and widows properties prevent awkward single lines at the bottom or top of pages.
Color Considerations
Color ink is expensive and many users print in black and white. Print stylesheets should remove decorative backgrounds and ensure sufficient contrast between text and background. Light text on dark backgrounds, common on screen, becomes unreadable when printed in grayscale.
@media print {
/* Remove backgrounds to save ink */
body,
article,
section,
div {
background: white !important;
color: black !important;
}
/* Remove shadows and effects */
* {
box-shadow: none !important;
text-shadow: none !important;
}
/* Simplify borders */
.card,
.panel {
border: 1px solid #ccc;
border-radius: 0;
}
/* Force color printing for essential elements */
.logo,
.chart {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
The print-color-adjust: exact property (with vendor prefix for WebKit browsers) forces browsers to print backgrounds and colors exactly as specified. Use this sparingly for elements where color is essential, like logos or data visualizations.
Page Margins and Sizing
The @page at-rule controls page-level properties like size, orientation, and margins. This is crucial for professional documents that need consistent formatting across all pages. Default browser margins are often too small, cutting off content near page edges.
The size property specifies paper size (letter, A4, legal) and orientation (portrait or landscape). Margins use physical units like inches (in), centimeters (cm), or millimeters (mm). The :first pseudo-class targets the first page, allowing for different margins on the title page. The :left and :right pseudo-classes enable different margins for facing pages in booklet-style printing.
Controlling Page Breaks
Page breaks can split content in awkward places: headings separated from their paragraphs, table rows cut in half, or images split across pages. CSS provides properties to control where page breaks can and cannot occur, ensuring professional-looking printed output.
@media print {
/* Never break after headings */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
break-after: avoid;
}
/* Never break inside these elements */
table,
figure,
img,
pre,
blockquote {
page-break-inside: avoid;
break-inside: avoid;
}
/* Always start new page before these elements */
.chapter,
.section {
page-break-before: always;
break-before: always;
}
/* Orphan and widow control */
p,
li {
orphans: 3;
widows: 3;
}
}
Both old (page-break-*) and new (break-*) properties are included for maximum browser compatibility. Orphans are lonely lines at the bottom of a page; widows are lonely lines at the top. Setting both to 3 ensures at least three lines stay together.
Displaying Link URLs
Hyperlinks lose their interactivity when printed. Users clicking on printed text won't get to the destination URL. Print stylesheets can display URLs next to links, making them useful even on paper. This is essential for reference documents, research papers, and any content where readers might want to visit linked resources later.
@media print {
/* Show URLs for external links */
a[href^="http"]:after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #666;
word-break: break-all;
}
/* Don't show URLs for anchor links */
a[href^="#"]:after {
content: "";
}
/* Style links for print */
a {
color: black;
text-decoration: underline;
}
}
The :after pseudo-element with content: attr(href) appends the URL in parentheses after each link. The href^="http" selector targets only external links, excluding relative links and anchors. The word-break: break-all property prevents long URLs from overflowing the page width.