What Is a CSS Print Stylesheet?
A CSS print stylesheet is a set of CSS rules that apply only when a web page is sent to a printer or exported as a PDF. Web browsers maintain two rendering contexts: the screen (default) and print. By wrapping rules in @media print { }, developers can completely transform how a page looks on paper — hiding navigation, adjusting typography, controlling page breaks, and removing ink-wasting backgrounds — without affecting the normal browser view.
💡 Looking for premium CSS templates and UI kits?
MonsterONE offers unlimited downloads of themes, HTML templates, and design assets — worth checking out for your next project.
Why Every Website Needs a Print Stylesheet
Without a dedicated print stylesheet, browsers fall back to rendering the page exactly as it appears on screen — complete with hamburger menus, cookie banners, sticky headers, sidebars, and decorative backgrounds. This wastes ink, wastes paper, and produces documents that are nearly unreadable. A well-crafted print stylesheet solves all of these issues and gives your users a professional printed output that matches the intent of your content.
Consider a news article that fills beautifully on a 1440px desktop screen. Without print styles, the reader gets two-thirds of the page taken up by navigation, ads, and social share buttons. With a proper @media print block, they get clean text, the article title, byline, and body — nothing more, nothing less. This is the difference between a professional web experience and an amateurish one.
The @page Rule: Controlling Paper Size and Margins
The @page at-rule lets you define the physical characteristics of the printed page before any content appears. Inside @media print, you can write:
@page {
size: A4 portrait;
margin: 1cm 1cm 1cm 1cm;
}
Common page sizes include A4 (ISO standard, used in most countries), Letter (US standard, 8.5×11 inches), Legal (8.5×14 inches), and A3 (twice the size of A4). Orientation can be portrait or landscape. Margins should be generous enough for comfortable reading — 1–2.5cm on all sides is typical. US-based documents often use 0.5–1 inch margins.
Page Break Control: Breaking and Avoiding
Page break properties are among the most powerful tools in print CSS. There are three main properties, each with modern and legacy versions:
- Break before:
break-before: page / page-break-before: always — forces a new page before the selected element. Use this on chapter headings, major sections, or the start of a new invoice.
- Break after:
break-after: page / page-break-after: always — forces a page break immediately after the element. Useful for cover pages or section dividers.
- Avoid break inside:
break-inside: avoid / page-break-inside: avoid — prevents the element from being split across pages. Essential for figures, tables, blockquotes, and cards that should never be orphaned mid-element.
Always output both the legacy page-break-* properties and the modern break-* shorthand to ensure compatibility across all browsers including older versions of Safari and Firefox.
Hiding UI Elements for Print
The most common print stylesheet task is hiding elements that only make sense on screen. Navigation menus, sidebars, advertisement slots, cookie consent banners, chat widgets, and social sharing buttons should all be suppressed with display: none !important. The !important flag is critical here — without it, higher-specificity screen styles may still win.
Common selectors to hide include: nav, header, footer, aside, .sidebar, [class*="ad"], iframe, form, and any component-specific classes used in your project. The generator provides checkboxes for common categories plus a free-form input for custom selectors.
Typography for Print
Screen typography and print typography have fundamentally different requirements. Screen fonts are measured in pixels; print fonts should be measured in points (pt). A good starting point is 12pt body text with 1.5 line height. Serif fonts like Georgia, Garamond, and Times New Roman are traditional choices for printed body text because their serifs guide the eye across long lines on paper.
Text color should always be set to pure black (#000000) or very dark grey for body text. Background colors should default to white unless you specifically need colored print output. Always set both color and background-color with !important to override any theme or dark mode styles that may otherwise bleed into the print context.
Ink Saving Techniques
Modern websites are colorful, textured, and graphically rich — which is expensive to print. Ink saving mode removes all background-color, background-image, box-shadow, and text-shadow properties from printed output by setting them to transparent and none with !important. This can reduce ink usage by 30–70% for heavily styled pages.
Note that -webkit-print-color-adjust: exact and its standard property print-color-adjust: exact control whether the browser is allowed to adjust colors for print optimization. Setting this to exact tells the browser to reproduce colors faithfully, which is what you want when you have deliberately chosen print colors.
Showing Link URLs in Print
Hyperlinks are meaningless on paper. The ::after pseudo-element combined with the attr() CSS function lets you append the URL of each link in parentheses after the linked text. The standard approach:
a[href]::after {
content: " (" attr(href) ")";
}
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
The second block suppresses URL display for anchor links (which reference the same page) and JavaScript links (which have no useful URL). This technique is widely used in print stylesheets for articles, documentation, and reports where readers may want to visit referenced links manually.
Table Handling in Print
Long tables often span multiple pages. Setting thead { display: table-header-group } tells the browser to repeat the table header row at the top of each new page, which keeps column labels visible throughout the document. Similarly, tfoot { display: table-footer-group } ensures totals rows appear at the bottom of each page. Individual rows should use break-inside: avoid to prevent rows from being split across pages.
How to Include the Generated CSS
There are two standard ways to use your generated print stylesheet. The simplest is to paste the @media print { } block at the end of your main CSS file. This keeps everything in one request and works perfectly.
Alternatively, save the CSS as a separate print.css file and link it with the media="print" attribute, which tells the browser to only load this file when printing and skip it for screen rendering — a small performance win:
<link rel="stylesheet" media="print" href="print.css">
For modern projects using CSS custom properties, remember that CSS variables are inherited into @media print — you can override specific custom properties inside the print block to change your design token values for print without touching individual selectors.