Building A Print Stylesheet: A Complete Guide

Introduction

Imagine trying to print an invoice from your dashboard and watching the browser spit out a document with navigation menus, advertising banners, and awkward page breaks that split your carefully organized table data. Your customer receives a seven-page document where critical information about payment terms appears on page three, headers from the website design dominate the top of every page, and the company logo consumes half of each sheet with its dark background.

This frustrating scenario plays out countless times across the web as users attempt to print receipts, invoices, reports, and reference materials. The default browser printing behavior treats webpages as they appear on screen, without consideration for the physical medium of paper. A well-crafted print stylesheet transforms this experience entirely, creating clean, professional documents that respect user needs while projecting your brand's attention to detail.

Print stylesheets are CSS rules specifically designed for printed output, hiding unnecessary elements, adjusting typography for legibility, and controlling page breaks to create cohesive documents. Whether you're building e-commerce platforms that generate printable order confirmations, SaaS applications with downloadable reports, or content sites where readers might want physical copies of articles, mastering print CSS separates professional implementations from amateur attempts. This guide covers everything you need to create effective print stylesheets that produce professional results across browsers and devices.

For developers working on web development projects, print optimization represents an often-overlooked aspect of comprehensive user experience design that demonstrates attention to detail and technical competence.

Why Print Stylesheets Matter

Websites are designed for screen viewing, with navigation menus, interactive buttons, advertisements, and colorful backgrounds that serve digital purposes but create significant problems when transferred to paper. Navigation systems that help users find their way through your site become meaningless ink consumption when printed. Call-to-action buttons that drive conversions online become confusing elements on physical documents. Analytics dashboards and real-time data displays that update constantly print as static, outdated snapshots that provide little value.

Print stylesheets address this fundamental disconnect between digital and physical presentation by selectively hiding, repositioning, or reformatting content specifically for printed output. Beyond improving aesthetics, thoughtful print styles reduce ink consumption significantly--replacing dark backgrounds with white space and removing decorative images saves both user resources and environmental impact. Improved readability comes from appropriate font sizing for physical reading distances, while strategic page break placement ensures important information remains intact rather than split awkwardly across pages.

Many users still prefer physical copies for contracts, invoices, research papers, and reference materials that they'll refer to repeatedly. Providing a polished print experience demonstrates attention to detail and genuine respect for user preferences, building trust in your brand's professionalism.

The Business Case for Print Optimization

Organizations that generate printable documents--receipts, reports, contracts, or product catalogs--benefit significantly from optimized print styles in ways that directly impact their bottom line. A well-designed print stylesheet reduces customer complaints about hard-to-read documents, decreasing support inquiries about printing problems and the associated support costs. Each support ticket prevented represents both direct cost savings and improved customer satisfaction that translates to retention and referrals.

Professional image projection matters in competitive markets where small details influence perception. A beautifully formatted printed invoice that looks deliberate and polished reinforces the quality of your product or service, while a cluttered, poorly formatted document creates unconscious doubt about organizational competence. Internally, employees spending less time manually editing or fixing print layouts before sharing documents with clients represents productivity gains that compound across every employee who prints documents regularly.

The investment in creating proper print styles pays dividends through improved user satisfaction across every print operation, reduced support burden, and enhanced professional image that supports sales and retention goals.

Accessibility and Alternative Viewing

Print stylesheets also serve accessibility purposes that extend beyond traditional printing scenarios. Users with certain disabilities may prefer to print content and read it in a familiar format, whether for personal preference, accessibility device compatibility, or environmental factors. The elderly or those with visual impairments might find printed text easier to read than screen content, particularly when they can control lighting and viewing distance.

Others might use printed copies as reference material in environments without reliable internet access or where screen time is limited. By designing thoughtful print styles that work well on paper, developers create more inclusive web experiences that accommodate diverse user needs and preferences across different contexts and abilities.

MDN Web Docs confirms that print media queries enable developers to adapt content for users who prefer or need physical copies, supporting accessibility requirements across diverse user populations.

When optimizing print styles, consider how these techniques complement your overall SEO services strategy by improving document indexing and accessibility signals.

Getting Started with Print Media Queries

The foundation of any print stylesheet is the @media print rule, which allows you to apply styles specifically when content is being printed or saved as PDF. This at-rule works exactly like other CSS media queries, grouping print-specific declarations that override or supplement your screen styles. Understanding the syntax and application patterns for print media queries enables precise control over how your content appears on paper, independent of screen presentation.

Basic @media Print Syntax

@media print {
 /* All print styles go here */
 body {
 font-size: 12pt;
 color: #000;
 }

 nav, .sidebar, .advertisement {
 display: none;
 }
}

This example demonstrates the core pattern: wrap print-specific rules inside the @media print block. Any declarations inside apply only during print operations, leaving screen styles completely unchanged. You can place print styles in a separate CSS file linked with media="print" or include them in your main stylesheet alongside screen styles. Both approaches have merit depending on project structure and team preferences.

Organizing Print Styles

Two primary approaches exist for organizing print styles within your project. The first keeps print styles in a separate CSS file linked with a media-specific attribute:

<link rel="stylesheet" href="print.css" media="print">

This approach offers organizational clarity by keeping print-specific code entirely separate, making it easier for teams to maintain and understand. The second approach integrates print styles within your main stylesheet using @media print blocks:

/* Main screen styles */
body {
 font-family: system-ui, sans-serif;
}

/* Print overrides */
@media print {
 body {
 font-family: Georgia, serif;
 font-size: 12pt;
 }
}

Modern development practices often favor the second approach, bundling all styles together to reduce HTTP requests while maintaining clear separation through media query blocks. This keeps related styles together and simplifies maintenance for smaller projects.

Overriding Screen Styles Effectively

Print styles interact with your existing CSS cascade, meaning later declarations take precedence unless specificity or importance flags intervene. Your print styles should account for screen styles they need to override, particularly for layout properties like display, position, and float. A common pattern involves resetting complex layouts to simple block formatting that works better in linear print contexts.

@media print {
 .complex-grid-layout {
 display: block;
 width: 100% !important;
 }

 .sidebar {
 display: none;
 }
}

The !important declaration ensures print styles win cascade conflicts, but use it judiciously--overuse creates maintenance headaches when screen and print styles diverge significantly across your stylesheet.

Piccalilli recommends organizing print styles with clear separation between hiding rules and formatting rules, starting with a dedicated section that removes unnecessary elements before applying positive formatting styles.

For complex web applications requiring print functionality, integrating these techniques with AI automation workflows can streamline document generation processes.

Controlling Page Breaks

One of the most important aspects of print styling involves controlling where content breaks across pages. Without explicit guidance, browsers insert page breaks based on available space, often creating awkward situations where paragraphs split mid-sentence, tables tear apart across pages leaving header rows on one page and data on another, or headings appear stranded at the bottom of a page with their content entirely on the next. CSS provides several properties for managing these breaks, enabling developers to create logical, readable pagination that maintains context and comprehension.

Page Break Properties

CSS offers two sets of page break properties: the original page-break-before, page-break-after, and page-break-inside from CSS 2.1, and the newer break-before, break-after, and break-inside from the CSS Fragmentation module. Both sets work similarly, with the newer properties offering additional values and better standardization across modern browsers.

@media print {
 /* Force page break before major sections */
 section.chapter-start {
 page-break-before: always;
 break-before: always;
 }

 /* Prevent breaks inside tables to keep data together */
 table {
 page-break-inside: avoid;
 break-inside: avoid;
 }

 /* Keep headings with their following content */
 h1, h2, h3 {
 page-break-after: avoid;
 break-after: avoid;
 }
}

The always value forces a page break, while avoid prevents breaks in specified locations. Using both property sets ensures maximum browser compatibility--older browsers recognize page-break-* while modern browsers support both syntaxes.

Orphans and Widows

Beyond controlling explicit breaks, CSS provides orphans and widows properties that manage paragraph flow across pages at a finer granularity. Orphans are lines appearing at the bottom of a page that continue from the previous page, while widows are lines appearing at the top of a page that belong to the previous paragraph. Both create visual disruption when present in isolation, leaving readers searching for context.

@media print {
 p {
 orphans: 3;
 widows: 3;
 }
}

Setting both properties to 3 ensures at least three lines of any paragraph appear on each page, preventing single lines stranded at page boundaries. These properties work at the paragraph level rather than controlling specific elements, making them particularly useful for body text while less relevant for headings or short content blocks.

Common Page Break Patterns

Certain content patterns recur across print documents, and establishing consistent rules for them improves output quality across your entire application. Tables benefit from break-inside: avoid to keep related data together, preventing header rows from separating from their data. Figures and images should stay with their captions, requiring page-break-inside: avoid on figure containers. Code examples often need protection from breaks to maintain readability, as split code becomes difficult to follow and reference.

@media print {
 /* Protect these elements from page breaks */
 table, figure, pre, code, .code-block {
 page-break-inside: avoid;
 }

 /* Keep headings with following content */
 h1, h2, h3, h4 {
 page-break-after: avoid;
 }

 /* Ensure chapter and section headings start on new pages */
 .chapter, .section, .page-break-before {
 page-break-before: always;
 }
}

CustomJS recommends applying page break rules to entire categories of content rather than individual elements, creating consistent behavior that users can rely on throughout your printed documents.

Using the @page At-Rule

The @page at-rule provides page-level control beyond individual element styling, enabling specification of page size, orientation, margins, and headers or footers. This rule applies to all pages in a printed document unless overridden by specific pseudo-classes, making it essential for establishing consistent page presentation across your entire document.

Setting Page Size and Orientation

@page {
 size: A4 portrait;
 margin: 2cm;
}

The size property accepts named page sizes like A4, Letter, Legal, or explicit dimensions in any valid CSS length unit. The portrait or landscape keywords control orientation, while the size property can also accept two values for custom dimensions specifying width and height explicitly.

/* Common page sizes */
@page {
 size: A4; /* 210mm x 297mm */
 margin: 2cm;
}

@page {
 size: Letter; /* 8.5in x 11in */
 margin: 1in;
}

@page {
 size: landscape; /* Default size, landscape orientation */
}

Different paper sizes suit different contexts--invoices might use A4 or Letter for standard business correspondence, while labels, cards, or receipts require smaller sizes that you specify explicitly.

Custom Margins and Page Marks

@page {
 size: A4;
 margin: 2cm 1.5cm;
 marks: crop;
}

Margin values work like the margin property on elements, accepting one to four values for different sides. The marks property adds crop or registration marks for professional printing workflows, though browser support for this property varies significantly. For documents requiring precise margins such as legal contracts with specific formatting requirements or formal reports with headers and footers requiring consistent spacing, @page margins provide the foundation for consistent presentation.

Page Pseudo-Classes

The @page rule supports several pseudo-classes that target specific pages within your document, enabling different formatting for first pages, left and right facing pages, and blank pages.

@page {
 size: A4;
 margin: 2cm;
}

@page :first {
 margin-top: 3cm;
}

@page :left {
 margin-left: 2.5cm;
 margin-right: 1.5cm;
}

@page :right {
 margin-left: 1.5cm;
 margin-right: 2.5cm;
}

@page :blank {
 display: none;
}

The :first pseudo-class targets the document's first page, useful for title pages or documents with different first-page formatting such as company letterheads. The :left and :right pseudo-classes handle facing pages differently, enabling asymmetric margins for books, reports, or any documents bound on one side where inner margins need additional space. The :blank pseudo-class targets intentionally blank pages, useful for suppressing headers, footers, or page numbers on pages without content.

MDN Web Docs documents comprehensive @page support including pseudo-classes for fine-grained page control across printed documents.

Hiding and Modifying Content for Print

Effective print stylesheets go beyond page formatting to modify which content appears and how it presents on the printed page. Navigation menus, advertisements, interactive buttons, cookie notices, and decorative elements that serve important purposes on your website should disappear entirely when printing, while links, abbreviations, and supplementary information may need special treatment to remain useful in physical form.

Elements to Hide

Navigation systems, sidebars, advertisements, social sharing buttons, modal dialogs, search boxes, and filter panels typically have no place in printed documents. Identifying these elements systematically and hiding them prevents visual clutter that distracts from your actual content:

@media print {
 nav, .navigation, .menu, .sidebar, .advertisement,
 .ad-banner, .social-share, .cookie-notice, .modal,
 .search-box, .filter-panel, .print-hide {
 display: none !important;
 }
}

The !important declaration ensures these elements remain hidden regardless of specificity from screen styles. Organizing these declarations in a dedicated section at the top of your print stylesheet creates clear separation between hiding rules and formatting rules.

Handling Links and URLs

Hyperlinks present a unique challenge in print--they're clickable on screen but meaningless on paper without URLs visible. Several approaches address this challenge, from printing URLs after linked text to hiding links entirely when the destination is obvious from context:

@media print {
 a[href]:after {
 content: " (" attr(href) ")";
 font-size: 0.8em;
 color: #666;
 }

 /* Don't print URLs for internal navigation links */
 a[href^="http://example.com"]:after,
 a[href^="https://example.com"]:after {
 content: none;
 }

 /* Print external links only */
 a[href^="http"]:not([href^="http://example.com"]):after {
 content: " (" attr(href) ")";
 }
}

This pattern prints URLs in parentheses after links, with exceptions for internal links where the URL adds no value. The attr(href) function pulls the URL directly from the href attribute, while the content property appends it to the link text. Limiting this to external links prevents redundant URLs for internal navigation while still providing reference information for external resources.

Adapting Abbreviations and Acronyms

@media print {
 abbr[title]:after {
 content: " (" attr(title) ")";
 }
}

Abbreviations and acronyms benefit from similar treatment, printing full titles in parentheses when the title attribute is available. This ensures printed documents remain fully understandable without relying on hover tooltips or browser tooltips that don't print.

Forms and Interactive Elements

Forms don't function in print, but their labels and structure often remain useful for note-taking or reference:

@media print {
 input, select, textarea {
 border: 1px solid #000;
 padding: 0.2em;
 background: none;
 }

 button, .btn, .submit-button, .reset-button {
 display: none;
 }

 label {
 font-weight: bold;
 }
}

Converting form inputs to simple bordered boxes creates printable form templates or worksheets, while hiding submit buttons removes interactive elements that serve no purpose on paper. This approach works well for order forms, registration documents, or any scenario where users might want to print and manually complete forms.

Piccalilli emphasizes that thoughtful content adaptation for print creates more professional documents that serve user needs without requiring manual editing after printing.

Typography and Color Considerations

Printed documents have fundamentally different constraints than screen displays--users can't zoom to resize text, contrast varies with printing quality and paper type, and color ink adds direct cost to each page. Print typography should prioritize readability, economy, and professional appearance, making thoughtful font selection, sizing, and color choices essential for effective printed output.

Font Selection for Print

@media print {
 body {
 font-family: Georgia, "Times New Roman", serif;
 font-size: 12pt;
 line-height: 1.5;
 }

 h1, h2, h3, h4 {
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 }
}

Serif fonts traditionally read better in print due to their distinguishing letter shapes that guide the eye along text lines, while sans-serif headings provide clear visual hierarchy. System fonts like Georgia, Times New Roman, Arial, and Helvetica ensure consistent rendering without requiring web font downloads that add complexity to printing.

If brand typography is essential to your identity, you can include web fonts in print styles with appropriate fallbacks:

@media print {
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

 body {
 font-family: 'Open Sans', Arial, sans-serif;
 font-size: 11pt;
 }
}

Color and Contrast

@media print {
 body {
 color: #000;
 background: #fff;
 }

 a {
 color: #000;
 text-decoration: underline;
 }

 /* Replace decorative backgrounds with borders */
 .highlight-box, .callout, .info-box {
 background: none;
 border: 2px solid #000;
 }

 /* Keep only essential backgrounds */
 table th {
 background-color: #f0f0f0 !important;
 -webkit-print-color-adjust: exact;
 print-color-adjust: exact;
 }
}

Black text on white background provides maximum contrast and readability while minimizing ink usage. Links should be distinguished through underlining rather than color alone, ensuring they're identifiable even in grayscale printing. Replace colored backgrounds with borders or keep them only when essential to content meaning, using -webkit-print-color-adjust: exact when background colors must print.

Print-Specific Element Formatting

@media print {
 code, pre {
 background: #f5f5f5;
 border: 1px solid #ddd;
 font-size: 10pt;
 padding: 0.2em;
 }

 pre {
 overflow-wrap: break-word;
 word-wrap: break-word;
 }

 blockquote {
 border-left: 3px solid #000;
 margin-left: 0;
 padding-left: 1em;
 }

 img {
 max-width: 100%;
 height: auto;
 }

 table {
 border-collapse: collapse;
 width: 100%;
 }

 td, th {
 border: 1px solid #000;
 padding: 0.3em;
 }
}

Code formatting benefits from subtle background highlighting and borders that survive grayscale printing while remaining readable. Blockquotes gain visual distinction through left borders rather than color. Images scale to fit available width, preventing overflow issues on narrow pages. Tables should use borders and padding for clear structure.

CustomJS recommends black-only color schemes for print efficiency while ensuring essential visual hierarchy remains intact through borders, spacing, and weight variations.

These typography considerations ensure your printed materials maintain the professional quality that reflects well on your web development expertise.

Physical Units and Sizing

Print media uses physical measurements rather than pixels, requiring understanding of absolute length units and their relationships. These units translate directly to printed output at their specified physical size, while screen-specific relative units like em, rem, and px behave differently depending on resolution assumptions in print contexts.

Absolute Length Units

@page {
 size: A4;
 margin: 2cm 1.5cm;
}

@media print {
 body {
 font-size: 12pt;
 line-height: 1.5;
 }

 table {
 border-spacing: 0;
 border-collapse: collapse;
 }

 td, th {
 padding: 0.3cm;
 }

 @page {
 margin-bottom: 1.5in;
 }
}

CSS supports several absolute units: inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc). Points (1/72 inch) are traditional typographic measurements that work well for font sizing, while centimeters and inches work well for layout margins and page settings. These units maintain their physical size when printed, unlike pixels that scale based on device resolution assumptions.

Unit Conversion Reference

While exact pixel values depend on rendering assumptions, absolute units maintain consistent physical sizing in print output regardless of screen resolution or zoom level. This predictability makes them essential for precise print formatting.

Page Size Considerations

@page {
 size: auto;
 margin: 2cm;
}

@media print {
 body {
 width: 100%;
 max-width: 21cm;
 }

 .content-container {
 max-width: 17cm;
 }
}

The auto size value lets the browser use the default paper size based on printer settings, which adapts automatically to different regions using Letter (US, Canada) or A4 (elsewhere) paper. Constraining content width prevents overflow issues while respecting page boundaries defined by your margins.

MDN Web Docs recommends using absolute units exclusively for print styling to ensure consistent physical measurements regardless of display resolution or zoom level.

Testing and Debugging Print Styles

Developing print stylesheets requires testing output in ways that differ from normal web development, as browsers don't display print styles in their normal view. Modern browser developer tools include print preview simulation and media query inspection capabilities, enabling developers to iterate on print styles without wasting paper or time on every change.

Browser Developer Tools

Most modern browsers support print media simulation through their developer tools interfaces. Chrome and Edge's Rendering tab includes options to emulate CSS media type--selecting "print" shows how your styles apply without actually printing. Firefox similarly provides media simulation through its developer tools responsive design mode. Safari's Develop menu includes options for simulating print media that work similarly.

/* Add temporary debug styles during development */
@media print {
 * {
 outline: 1px solid red !important;
 }

 /* Highlight all links to verify hiding rules */
 a {
 outline: 2px solid blue !important;
 }

 /* Show all elements including normally hidden ones */
 nav, .sidebar, .advertisement {
 outline: 3px solid orange !important;
 }
}

Debug outlines help visualize element boundaries and verify that hidden elements truly disappear. Remove these styles before deployment, but they significantly accelerate development iterations by making invisible changes visible.

Print Preview and Actual Testing

While developer tools simulate print styles effectively, actual printing reveals issues that emulation might miss--margins falling outside printable areas, background graphics disabled by default, or font substitution occurring when web fonts fail to load. Periodic testing with actual printed output catches these real-world issues, particularly for critical documents like contracts, invoices, or formal reports that represent your organization professionally.

Key items to verify in actual prints:

• Margins and content positioning relative to page edges
• Whether background colors and images print (may require user opt-in)
• Page numbers and headers/footers from browser defaults
• Font rendering and substitution
• Table formatting and page breaks within tables
• Image positioning and scaling

Common Browser Quirks

Different browsers handle print styles inconsistently in several key areas that require attention during cross-browser testing:

• Background graphics: Often disabled by default in print settings, requiring user opt-in or -webkit-print-color-adjust: exact
• Page margins: Some browsers add their own headers and footers despite @page margins
• Page breaks: Break point selection varies between browser rendering engines
• Hyphenation: Availability and behavior differ significantly across browsers
• Page size defaults: Different default paper sizes for different regions (Letter vs A4)

Testing across multiple browsers--Chrome, Firefox, Safari, and Edge--identifies inconsistencies requiring vendor prefixes, alternative approaches, or browser-specific overrides. Consider creating a checklist document that verifies each critical element across browsers.

Piccalilli emphasizes that actual printed output testing remains essential despite sophisticated browser tools, as certain print behaviors only manifest on physical paper.

Advanced Techniques

Beyond fundamentals, advanced print styling incorporates custom fonts, QR codes for digital linking, and print-specific JavaScript interactions. These techniques create richer print experiences that bridge physical and digital contexts, enabling innovative use cases for printed materials.

Custom Fonts in Print

@media print {
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

 body {
 font-family: 'Roboto', Arial, sans-serif;
 }

 h1, h2, h3 {
 font-family: 'Roboto', Arial, sans-serif;
 }
}

Web fonts load for print output when specified within print media queries, enabling branded typography in printed materials that matches your website's visual identity. Ensure fonts are available or accept graceful fallbacks--custom fonts that fail to load revert to system fonts, maintaining readability without design compromise.

QR Codes for Digital Linking

@media print {
 .qr-link:after {
 content: " Scan for digital version: " url("https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://example.com");
 }

 .qr-image {
 display: inline-block;
 }
}

<a href="https://example.com" class="qr-link">Product Details</a>

QR codes bridge print and digital by linking printed materials to dynamic online content. This technique works for product packaging linking to digital manuals, business cards linking to online portfolios, event tickets linking to entry information, or any context where additional information exists online that would clutter printed materials.

The example above generates QR codes dynamically using a public API, embedding them alongside text links for users who prefer digital access. Combined with printed URLs, this provides multiple paths to the same content.

JavaScript Print Events

// Prepare data before print dialog opens
window.addEventListener('beforeprint', function() {
 // Expand collapsed sections for printing
 document.querySelectorAll('.expandable').forEach(function(el) {
 el.classList.add('expanded');
 });

 // Load any lazy-loaded content
 document.querySelectorAll('[data-lazy-load]').forEach(function(el) {
 el.src = el.dataset.src;
 });

 // Track print events for analytics
 if (typeof gtag !== 'undefined') {
 gtag('event', 'print', {
 'event_category': 'Engagement',
 'event_label': window.location.pathname
 });
 }
});

// Clean up after print dialog closes
window.addEventListener('afterprint', function() {
 // Restore collapsed state
 document.querySelectorAll('.expandable.expanded').forEach(function(el) {
 el.classList.remove('expanded');
 });

 // Restore lazy-load state if needed
});

The beforeprint and afterprint events enable JavaScript interactions tied specifically to printing--preparing data, expanding collapsed sections, loading additional content, or triggering analytics tracking. These events fire when users initiate print through browser menus, keyboard shortcuts, or programmatic window.print() calls.

Programmatic Printing

function printSection(elementId) {
 const printContent = document.getElementById(elementId).innerHTML;
 const originalContent = document.body.innerHTML;

 document.body.innerHTML = printContent;
 window.print();
 document.body.innerHTML = originalContent;

 // Re-attach event listeners
 attachEventListeners();
}

For specific use cases, programmatic printing enables targeted output rather than printing entire pages. This approach works for invoice printing, report generation, or any scenario where users should print specific sections.

MDN Web Docs documents print-specific JavaScript events and APIs that enable sophisticated print functionality beyond basic CSS styling.

Advanced print techniques like these complement comprehensive AI automation solutions for document generation workflows.

Common Pitfalls and Solutions

Even experienced developers encounter issues with print stylesheets that can produce unexpected results. Understanding common pitfalls and their solutions accelerates development and prevents recurring problems that affect printed document quality.

Hidden Content Still Takes Space

Elements with display: none remove from layout in most cases, but certain browser rendering behaviors can leave unexpected blank space in some configurations:

/* May still leave space in some browsers */
@media print {
 .sidebar {
 display: none;
 }
}

/* More robust approach */
@media print {
 .sidebar {
 display: none;
 position: absolute;
 left: -9999px;
 }
}

Elements with display: none remove from the document flow entirely, but combining position: absolute with off-screen positioning provides additional insurance against unexpected space allocation in edge cases.

Links Breaking Across Pages

@media print {
 a {
 break-inside: avoid;
 }
}

Hyperlinks spanning page breaks can create confusion, with the link text on one page and its URL on another. Preventing breaks inside links maintains their visual coherence and keeps related text together.

Images Breaking Across Pages

@media print {
 img, figure, .image-container {
 max-width: 100%;
 page-break-inside: avoid;
 }
}

Images torn across pages disrupt visual flow and can lose context entirely. Setting maximum width and preventing page breaks inside image containers keeps images intact on single pages.

Tables Spanning Multiple Pages

Tables require special treatment with specific display values and break rules:

@media print {
 table {
 page-break-inside: avoid;
 }

 thead {
 display: table-header-group;
 }

 tfoot {
 display: table-footer-group;
 }

 tbody {
 page-break-inside: avoid;
 }
}

The display: table-header-group ensures headers repeat at the top of each page when tables span multiple pages, while page-break-inside: avoid on tbody keeps related rows together. This table-specific formatting creates professional-looking printed data.

Background Colors Not Printing

@media print {
 .highlight {
 background-color: #ffff00;
 -webkit-print-color-adjust: exact;
 print-color-adjust: exact;
 }
}

Many browsers disable background colors by default in print settings to save ink. The -webkit-print-color-adjust: exact property forces background color printing, though it may require user permission in some browsers.

CustomJS provides a comprehensive checklist of common pitfalls with recommended solutions for each scenario developers encounter when creating print stylesheets.

Sources

1. MDN Web Docs - Printing - Comprehensive official documentation on CSS print media queries, @page rules, and browser APIs for print handling
2. Piccalilli - Printing the Web - Modern, practical guide covering print stylesheet techniques, testing methods, and real-world use cases
3. CustomJS - Print CSS Cheatsheet - Detailed HTML/CSS tips for PDF generation including page breaks, custom fonts, and element hiding