CSS Print Stylesheets: Making Web Pages Printer-Friendly
Web pages printed without a print stylesheet produce wasteful, unreadable output. Learn how to create CSS that makes your content look great on paper.
CSS Minifier
Why Print Stylesheets
Despite the digital age, users still print web pages — invoices, recipes, articles, tickets, and directions. Without a print stylesheet, users get navigation bars, ads, cookie banners, and footer links wasting ink and paper.
Setting Up Print Styles
Use a separate stylesheet or a media query block:
@media print {
nav, .sidebar, .footer, .cookie-banner { display: none; }
body { font-size: 12pt; line-height: 1.5; color: #000; }
a { color: #000; text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; font-size: 90%; }
}
Key Adjustments for Print
Remove decorative backgrounds and replace dark themes with black-on-white text. Set font sizes in points (pt), not pixels. Expand abbreviated URLs by displaying the href. Remove interactive elements (dropdowns, accordions) and show their content expanded. Set explicit page margins using @page { margin: 2cm; }.
Controlling Page Breaks
Use break-before, break-after, and break-inside to control where page breaks occur. Prevent breaking inside figures, code blocks, and tables: figure, pre, table { break-inside: avoid; }. Force page breaks before major sections: h2 { break-before: page; }.
Testing Print Styles
Use browser DevTools to toggle print media emulation (Chrome: More Tools > Rendering > CSS media type > print). Generate a PDF to inspect the actual output. Check multi-page documents for orphaned headings, broken tables, and missing content.
関連ツール
関連フォーマット
関連ガイド
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.