How to Create Printer-Friendly Web Pages with CSS

Use CSS print rules to keep the useful content, hide screen-only controls, and define page margins. Put the rules in an @media print block in your existing stylesheet, or load a separate stylesheet with media="print". Use @page for paper size, orientation, and margins, then inspect the result in print preview on both short and long pages.

1. Add a print stylesheet

For a small set of rules, an @media print block is easy to maintain alongside your screen styles. If print styling is large or owned separately, use a dedicated file:

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

With a dedicated file, put the print rules shown below in print.css. In either arrangement, ordinary CSS cascade and specificity apply. A more specific screen rule can override a print declaration, so inspect computed styles when a rule appears to have no effect. See MDN’s printing guide.

2. Start with a practical print stylesheet

/* Include these rules in your main stylesheet, or save them as print.css. */
@media print {
  /* Remove controls and decoration that do not help on paper. */
  nav,
  .site-header,
  .site-footer,
  .print-controls,
  .advertisement,
  button,
  .cookie-banner {
    display: none !important;
  }

  html,
  body {
    color: #000;
    background: #fff;
  }

  body {
    font: 11pt/1.4 Georgia, serif;
  }

  /* Keep links readable without relying on their screen color. */
  a {
    color: inherit;
    text-decoration: underline;
  }

  /* Keep common content blocks together where the browser can. */
  img,
  table,
  pre,
  blockquote {
    break-inside: avoid;
  }
}

@page {
  size: auto;
  margin: 18mm;
}

Replace example selectors such as .site-header with selectors from your own page. Avoid hiding a broad element if it contains the article itself. break-inside: avoid is a request to avoid splitting a block; if a table, image, or code block is taller than the printable area, it may still need to split or overflow.

3. Set page size, orientation, and margins

The @page rule controls the page box. Set a specific paper size or orientation when your use case requires it; leave sizing flexible when the output should adapt to the user’s paper settings.

/* Flexible paper size, with a consistent printable margin. */
@page {
  size: auto;
  margin: 18mm;
}

/* Example for a document intended for A4 portrait paper. */
@page {
  size: A4 portrait;
  margin: 18mm 16mm;
}

/* Example for a wide report. */
@page wide-report {
  size: A4 landscape;
  margin: 14mm;
}

Named page rules can be useful when different document sections need different page geometry, but keep the simple unnamed rule unless your layout actually needs that distinction. The MDN paged media guide explains page layout, and the W3C CSS Paged Media Module Level 3 describes page boxes and paged content. Its cited document is a Working Draft; verify behavior in the browsers and print workflows you support.

4. Make content readable on paper

Hide interface, preserve meaning

Hide navigation, interactive controls, advertisements, and other elements that do not belong on paper. Preserve headings, bylines, captions, citations, and any content needed to understand the page. Do not hide a parent container when the main content is inside it.

Use a paper-friendly type scale

Choose a readable size and line height, and avoid fixed screen widths that make printed content too narrow. Check long URLs, tables, and code blocks for overflow. If a code sample must be retained, allow it to wrap or provide a deliberate overflow strategy rather than shrinking all body text.

Keep links and color understandable

Links should remain identifiable in grayscale, for example with underlining. Do not use color as the only way to convey status or meaning. Browsers and user print settings may alter colors or omit background graphics. The print-color-adjust property can request that authored colors be preserved:

@media print {
  .brand-mark {
    print-color-adjust: exact;
  }
}

This is a request, not a guarantee: browser behavior and the user’s print settings still affect the output. Prefer contrast and clear structure that work without backgrounds. See MDN’s guide to using color wisely.

5. Handle page breaks and long content

Web pages are continuous, but print output fragments them into sheets. Long tables, images, code samples, and quotations deserve special attention. Start by asking the browser to keep related blocks together:

@media print {
  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  figure,
  blockquote,
  pre {
    break-inside: avoid;
  }

  .chapter {
    break-before: page;
  }
}

Use forced breaks only for intentional section boundaries. An oversized block cannot always fit on one sheet, and break behavior can differ between browser print implementations. Test the actual content rather than assuming a rule guarantees a particular pagination.

6. Choose between a media block and a separate file

Approach	Useful when	Trade-off
`@media print` in the main stylesheet	Print rules are modest and maintained with the page styles.	Screen and print declarations share a file, so it can become harder to scan as print styles grow.
Separate file linked with `media="print"`	You want print-specific rules isolated or managed independently.	Developers need to find and update a second stylesheet.

Neither approach is universally better. Choose based on how much print styling the project has and how your team maintains stylesheets.

7. Test the output in print preview

Open the browser’s print preview and confirm the primary content remains while navigation and screen-only controls disappear.
Check a short page and a long page that spans several sheets. Look for clipped content, awkward breaks, split tables, and oversized images.
Inspect grayscale output or simulate it. Confirm links and status indicators remain understandable without color.
Change paper size and orientation in the preview. Check that margins and content width still work.
After changing global styles, inspect computed styles again; normal cascade and specificity still affect print rules.

Print preview shows the page as paged output. For interfaces that need to change at the moment printing starts or ends, browsers also expose beforeprint and afterprint events. Use CSS for ordinary layout changes; use those events only when the interface itself must respond to the print action. See MDN’s printing documentation.

Or skip the browser setup

If you need a screenshot or PDF of a web page without setting up a browser capture flow, ScreenshotNeo returns one from a GET request. This runnable cURL example saves a WebP screenshot of Stripe:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot, page-info, and PDF tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Troubleshooting print CSS

Symptom	Likely cause	What to check
A print rule has no visible effect	A more specific rule, later declaration, or stylesheet order wins in the cascade.	Inspect computed styles in print emulation or preview; adjust selector specificity or stylesheet order.
Navigation or controls still appear	The selector does not match the rendered element, or another rule overrides it.	Check the actual class and element, then verify the computed `display` value for print.
Content is missing	A selector hides a container that also holds needed content.	Hide only the screen-only child element and confirm the article container remains visible.
Background colors or images disappear	The browser or user print settings suppress background graphics or adjust colors.	Keep meaning independent of backgrounds; treat `print-color-adjust: exact` as a request, not a guarantee.
A table, image, or code block splits or clips	The block is too large for the available page area, or the print engine handles breaks differently.	Inspect long content in preview, allow sensible wrapping, and avoid keeping oversized blocks together.
Margins look wrong	`@page` settings interact with selected paper, orientation, or print-dialog options.	Check the preview’s paper and margin settings as well as the CSS page rule.

Performance, reliability, and cost

Print CSS is part of the page’s stylesheet and does not require a screenshot service to produce a user’s ordinary print output. Keeping rules focused and avoiding unnecessary JavaScript makes the print layout easier to maintain. Reliability depends on checking the content in the target browser and print workflow: CSS declarations alone do not show whether pagination, colors, and margins look right. For automated screenshots or PDFs of pages, ScreenshotNeo is an optional API route; its billing rules and plans are described in the documentation and product site.

FAQ

Can I print a page without changing its screen layout?

Yes. Put print-only declarations in @media print or a stylesheet linked with media="print"; those rules target print output.

Does CSS guarantee identical PDFs in every browser?

No. Print preview and output depend on browser implementation and user-selected print settings. Validate the browsers and paper configurations you support.

Should I force every image or table to stay on one page?

No. Avoid breaks for compact blocks when it helps readability, but a block larger than the printable page cannot reliably remain intact. Check long content in preview.

Do print styles require JavaScript?

Ordinary print layout changes are handled with CSS. The browser’s beforeprint and afterprint events are available when the interface needs to react to the print action itself.