CSS Print Stylesheet Generator

A client hits Ctrl+P on your web app and gets: the navigation bar, the cookie banner, the sticky footer, three ad slots, and a sidebar widget — all on the first page. The actual content starts on page two. Every web developer has been here, and the fix is always the same: an @media print block that hides screen-only elements, sets print-safe typography, controls page breaks, and shows link URLs. The problem is remembering the syntax for @page, break-inside: avoid, orphans, widows, and whether it’s print-color-adjust or -webkit-print-color-adjust.

Why This Generator (Not Writing @media print by Hand)

This tool generates a complete @media print block from a visual form: pick a preset (Article, Documentation, Invoice, Résumé), configure page size, add selectors to hide, set typography, control page breaks, and copy the output. Four presets cover the most common document types with sensible defaults. Everything runs in your browser; no data is sent anywhere.

What Is a CSS Print Stylesheet?

A CSS print stylesheet applies styles only when a web page is printed — either to a physical printer or saved as a PDF. It is defined inside an @media print { } block and lets you completely reshape how a page looks on paper: hiding navigation bars and advertisements, adjusting typography to print-safe values, controlling how content breaks across pages, and showing link URLs inline.

Without a print stylesheet, most websites print with navigation menus, sidebar widgets, sticky headers, and interactive buttons — all useless on paper and a waste of ink. A well-crafted print CSS delivers a clean, readable document from any web page.

Key CSS Sections in a Print Stylesheet

How to Use the CSS Print Stylesheet Generator

1. Choose a preset — select Article/Blog Post, Documentation, Invoice, or Résumé/CV to load a sensible starting configuration for your document type.
2. Configure page setup — select your paper size (A4, Letter, Legal, etc.) and orientation, then set margins in cm, mm, or in.
3. Add hidden selectors — enter CSS selectors for elements to hide during printing (nav bars, footers, ad containers, share buttons).
4. Adjust typography — set the font family, size (in pt for print), and line height. Enable heading scale to reduce heading sizes proportionally.
5. Set color options — force black text, remove all background colors, and strip box and text shadows.
6. Configure links — choose whether to show URLs after link text (all links, external only, or none).
7. Control images and tables — constrain images to the page width, avoid breaking tables and images across pages, and enable header row repetition.
8. Set orphans and widows — specify the minimum number of lines that must remain at a page bottom (orphans) or top (widows).
9. Add custom page break rules — target specific selectors and control break-before, break-after, and break-inside behavior.
10. Copy the CSS — click “Copy CSS” to get the complete @media print { } block, ready to paste into your stylesheet.

Preset Configurations Explained

Article / Blog Post

Optimized for long-form reading content. Hides navigation, comments, social share buttons, and related posts. Uses a serif font (Georgia) at 12pt for comfortable reading on paper. Shows link URLs for reference. Three orphans and widows to prevent isolated lines.

Documentation

Targeted at technical documentation sites. Uses a sans-serif font at 10pt for higher information density. Shows external link URLs only (internal navigation links are irrelevant on paper). Avoids breaking code blocks.

Invoice

Designed for business documents. Preserves brand colors (backgrounds not removed) so logos and colored table headers print correctly. Hides only general navigation, not the document footer. Avoids breaking tables across pages. Links do not show URLs.

Résumé / CV

Single-page format with tight margins (1.27 cm — matching common word processor defaults). Forces black text for professional appearance. No URL display after links (hiring managers don’t need raw URLs). Table breaks avoided for clean layout.

The @page Rule

The @page rule is the foundation of any print stylesheet. It controls the physical page properties:

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

Common Size Values

For landscape, swap width and height: size: 297mm 210mm (A4 landscape).

Named Page Selectors

@page supports pseudo-selectors for targeting specific pages:

@page :first {
  margin-top: 4cm; /* Extra top margin on page 1 */
}

@page :left {
  margin-left: 3cm; /* Wider left margin on left pages */
}

@page :right {
  margin-right: 3cm; /* Wider right margin on right pages */
}

Hiding Elements for Print

The most impactful change in any print stylesheet is hiding elements that make no sense on paper:

@media print {
  nav,
  header nav,
  footer,
  aside,
  .ads,
  .social-share,
  .comments,
  .no-print {
    display: none !important;
  }
}

The !important ensures these rules override any inline styles or JavaScript-applied classes. Common candidates to hide:

• Navigation menus (nav, .navbar, [role="navigation"])
• Sidebars (aside, .sidebar, .widget-area)
• Advertisements (.ads, .advertisement, [class*="ad-"], #google_ads)
• Social sharing buttons (.share, .social-share, .addthis)
• Comment sections (#comments, .comments-section)
• Cookie banners and modals (.cookie-banner, .modal-overlay)
• Search bars ([role="search"], .search-form)
• Video players (video, .video-wrapper)

Typography for Print

Screen fonts optimized for low-resolution displays (Helvetica, system-ui) do not always render well at printer resolution. For print, serif fonts like Georgia or Times New Roman typically produce better results for body text. Point units (pt) are more natural than pixels for print, where 1pt = 1/72 inch.

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    font-family: Georgia, 'Times New Roman', serif;
    color: #000 !important;
  }

  h1 { font-size: 22pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
}

For code and technical documentation, Courier New or a system monospace font works well.

Removing Backgrounds and Shadows

Most browsers disable background colors and images in print by default (to save ink). To explicitly control this:

@media print {
  * {
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

The print-color-adjust: exact property forces the browser to print background colors and images even when the user has disabled “print backgrounds” in the print dialog. Use it when you need to preserve brand colors or table row highlights in invoices and reports.

Displaying Link URLs After Link Text

Printed pages cannot be clicked. Including the destination URL after each link makes the document self-contained as a reference:

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Don't show URLs for internal anchor links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

For external links only (useful in documentation where internal navigation links are meaningless as raw URLs):

@media print {
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
  }
}

Page Break Control

Modern Syntax (Recommended)

/* Force a new page before every h1 */
h1 {
  break-before: page;
}

/* Avoid breaking section elements */
section {
  break-inside: avoid;
}

/* Force a page break after the first section */
.cover-page {
  break-after: page;
}

Legacy Syntax (Compatibility)

For older browsers and PDF generators, include both:

h1 {
  break-before: page;
  page-break-before: always; /* Legacy */
}

Images in Print

Without a print stylesheet, oversized images overflow the page width. Always constrain images:

@media print {
  img {
    max-width: 100% !important;
    height: auto;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

For figure captions, ensure they stay with the image:

figure {
  break-inside: avoid;
}

Table Styling for Print

Tables need special handling to remain readable on paper:

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 4pt 8pt;
  }

  /* Repeat table headers on each page */
  thead {
    display: table-header-group;
  }

  /* Avoid widowed rows */
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

The display: table-header-group on thead is the standard way to repeat column headers on each printed page — a critical UX improvement for long data tables.

Orphans and Widows

Typographers use “orphans” to mean the number of lines left at the bottom of a page, and “widows” for lines at the top of the next page. CSS exposes these directly:

p, li {
  orphans: 3;
  widows: 3;
}

A value of 3 means “don’t allow fewer than 3 lines of this paragraph to remain alone at a page break.” Browsers will shift content earlier to honor these values. The default is 2 in most browsers.

Code Blocks in Print

Code blocks often have dark backgrounds and horizontal scrollbars — both useless when printed:

@media print {
  pre, code {
    break-inside: avoid;
    page-break-inside: avoid;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 9pt;
    background: transparent !important;
    border: 1px solid #ccc;
  }
}

white-space: pre-wrap preserves formatting while allowing lines to wrap at the page edge instead of being clipped.

Frequently Asked Questions

Should I use a separate print CSS file or an @media print block? An @media print { } block in your main stylesheet is preferred — it reduces HTTP requests and keeps styles in one place. A separate file (<link media="print">) is only needed if your print styles are very large (hundreds of lines) and you want to keep files organized.

Why does my background not print even though I specified it? Browsers disable background printing by default to save ink. Add print-color-adjust: exact (and -webkit-print-color-adjust: exact for Safari) to your element. Users can also enable “print backgrounds” in their browser’s print dialog.

How do I create a “print this page” button? Use <button onclick="window.print()">Print</button>. Then hide this button in print with .print-btn { display: none; } inside @media print. Consider adding @media print { .no-print { display: none; } } as a general utility class.

Can I force a two-column layout in print? Yes. Use CSS Multi-column in @media print: .content { column-count: 2; column-gap: 1cm; }. This is common for newsletters and brochures.

How do I add page numbers to printed pages? CSS Paged Media supports @page content and counters for page numbers, but browser support is inconsistent. The most reliable cross-browser approach uses a library like Paged.js. For simple use cases, include a <footer> with JavaScript-generated page information and style it with position: fixed; bottom: 0; inside @media print.

What is print-color-adjust vs -webkit-print-color-adjust? print-color-adjust is the standard property (Chrome 81+, Firefox 97+, Safari 15.4+). -webkit-print-color-adjust is the legacy WebKit prefix for older Safari and Chrome. Include both for maximum compatibility: -webkit-print-color-adjust: exact; print-color-adjust: exact;.