Create print-friendly stylesheets using the @media print query
Master the @page rule for controlling page margins, size, and orientation
Hide non-essential elements like navigation and ads when printing
Show link URLs after anchor text in printed documents
Control page breaks with page-break-before, page-break-after, and page-break-inside
Optimize colors, fonts, and images for print to save ink and improve readability
Handle headers, footers, and repeating table headings in multi-page prints
Introduction to Print Styles
Print styles optimize web pages for printing on paper, transforming screen-optimized designs into printer-friendly documents. While printing web pages may seem like an afterthought in today's digital world, many users still need to print important content like articles, invoices, tickets, and documentation. Well-designed print styles save ink, improve readability, and ensure critical information transfers to paper effectively.
Print stylesheets address unique challenges: removing unnecessary navigation and ads, converting colors to print-friendly alternatives, showing link destinations, preventing awkward page breaks, and adjusting typography for readability on paper. These considerations make the difference between a professional printed document and a mess of cropped content and wasted paper.
Basic Print Media Query
The @media print query targets styles that only apply when printing. Everything inside this block is ignored for screen display and only takes effect when the page is printed or viewed in print preview.
The @page rule controls the page box properties including margins, size, and orientation. This is essential for creating properly formatted printed documents with appropriate spacing.
Navigation, ads, sidebars, and interactive elements should typically be hidden when printing to save ink and focus on the main content. Use display: none to hide these elements completely.
Links are interactive on screen but meaningless on paper. Show the full URL after each link so readers know where it points. Use the attr() function to insert the href value.
@media print {
/* Show URLs after links */
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
/* Don't show URLs for anchor links */
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
/* Handle long URLs that might break layout */
a[href]::after {
word-wrap: break-word;
word-break: break-all;
}
/* Optional: Show URLs below link text */
a[href] {
position: relative;
}
a[href]::after {
display: block;
margin-top: 0.25em;
font-style: italic;
}
}
Controlling Page Breaks
Page breaks can split content awkwardly. Control where breaks occur to keep related content together and avoid orphaned headings.
@media print {
/* Keep headings with following content */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
/* Don't break inside these elements */
pre,
blockquote,
table,
.card,
.code-block {
page-break-inside: avoid;
}
/* Force page break before major sections */
.chapter {
page-break-before: always;
}
/* Prevent orphans and widows */
p {
orphans: 3; /* Min lines at bottom of page */
widows: 3; /* Min lines at top of page */
}
/* Modern syntax (better browser support coming) */
.element {
break-inside: avoid;
break-before: page;
break-after: avoid;
}
}
Optimizing Colors and Backgrounds
Colored backgrounds waste ink and can make text harder to read when printed. Convert to print-friendly colors and remove unnecessary decorative elements.
@media print {
/* Remove all backgrounds and convert to black text */
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Keep important visual structure */
.chart,
.diagram,
.important-callout {
border: 1px solid black !important;
}
/* Convert colored text to black */
h1, h2, h3, p, li, td {
color: black !important;
}
/* Light borders instead of heavy ones */
table, th, td {
border: 1px solid #333;
}
}
Typography for Print
Print typography differs from screen typography. Serif fonts are more readable on paper, and appropriate sizing in points ensures consistent output regardless of printer resolution.
@media print {
/* Serif fonts for better print readability */
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 12pt;
line-height: 1.5;
}
/* Appropriate heading sizes */
h1 { font-size: 24pt; line-height: 1.2; }
h2 { font-size: 18pt; line-height: 1.2; }
h3 { font-size: 14pt; line-height: 1.3; }
h4, h5, h6 { font-size: 12pt; line-height: 1.3; }
/* Readable body text */
p {
font-size: 12pt;
line-height: 1.5;
margin-bottom: 12pt;
}
/* Smaller text for captions and footnotes */
.caption,
.footnote {
font-size: 10pt;
}
}
Table Printing
Tables require special attention in print to ensure headers repeat on each page and rows stay together. Proper table styling prevents data from becoming unreadable across page breaks.
Images should be optimized for print to prevent breaking across pages and ensure proper sizing. High-resolution images may need different treatment than decorative images.