jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Print Styles Generator

Build a print-ready CSS block that hides non-content elements, expands link URLs for reference, avoids awkward page breaks, and sets sensible print margins and page size. Designed for documentation, recipes, checklists, and long articles.

Loading tool...

What is CSS Print Styles Generator?

A print stylesheet is CSS inside @media print that styles the page when someone prints or saves as PDF. It should hide navigation, sidebars, and footers, show full URLs after links, prevent page breaks inside important blocks like tables and code, and set sensible margins. This is especially useful for documentation, recipes, invoices, and articles.

quickAnswer

Generate a @media print block that hides navigation, shows link URLs, controls page breaks, and sets sensible print margins. Essential for making articles, recipes, documentation, and invoices print cleanly.

Last updated: 2026-06-11

limitations

  • Page-break rules such as page-break-inside: avoid are hints to the browser print engine, not guarantees. The engine may still break content if the block does not fit on one page.
  • Browser print engines render CSS differently. Chrome, Firefox, and Safari each produce slightly different printed output, especially with background colors, page margins, and multi-column layouts.
  • Print style rules only apply when the page is printed or viewed in print preview. Changes made in the browser DevTools with screen media enabled will not show print style effects. Always test print styles in print preview or by selecting the print media type in the DevTools Rendering panel.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Select the elements you want to hide when printing.
  2. Choose whether to show URLs after links.
  3. Set margin and page size preferences.
  4. Copy the @media print block into your stylesheet and test with print preview.

What you can use it for

  • Prepare a recipe page for clean printing without navigation and ads.
  • Make documentation pages print with full link URLs for reference.
  • Style invoices and checklists for professional printed output.

Use cases

Practical examples

example

Recipe card print styles

A recipe blog adds print styles so readers can print a clean recipe card without the header, sidebar, and comments.

example

Documentation with expanded URLs

A documentation site prints with expanded link URLs so readers can follow references on paper.

Common mistakes

  • Hiding all images instead of just decorative ones.
  • Using display:none on everything without testing the printed output.
  • Not setting page-break-inside: avoid on tables and code blocks.

verification

  1. Use print preview in Chrome, Firefox, and Safari to verify the page prints without navigation, with expanded link URLs, and with appropriate page breaks.
  2. Save the page as PDF from each browser and compare the output for consistency in margins, font sizes, and page break placement.

FAQ

Questions about CSS Print Styles Generator

How do I test print styles?

Use the browser print preview (Ctrl+P) or DevTools rendering tab to emulate print media.

Should print styles be in a separate file?

You can use a separate print.css or embed @media print in your main stylesheet. Both approaches work.

Which elements should I hide in print styles?

Hide navigation bars, sidebar menus, footer widgets, comment sections, share buttons, newsletter signup forms, and any interactive elements that serve no purpose on paper. Use .nav { display: none; } or create a .no-print utility class. Keep the main content, headings, images, and any data tables that are part of the article body. The goal is a clean, readable document without page chrome.

How do I handle page breaks in print CSS?

Use page-break-before, page-break-after, and page-break-inside with values of auto, always, or avoid. The modern equivalents are break-before, break-after, and break-inside in the CSS Fragmentation spec. For example, use break-inside: avoid on code blocks, images, and tables to prevent them from being split across two pages. Use break-before: always on major section headings to start each section on a new page.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool