CSS Tools

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.

Quick answer

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.

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.

How to use this tool

Select the elements you want to hide when printing.
Choose whether to show URLs after links.
Set margin and page size preferences.
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

Use print preview in Chrome, Firefox, and Safari to verify the page prints without navigation, with expanded link URLs, and with appropriate page breaks.
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.

How do I test print styles before printing?

Use the browser print preview (Ctrl+P or Cmd+P) to see how the page will print. In Chrome DevTools, open the Rendering tab and select Print from the Emulate CSS media type dropdown to test styles without triggering the actual print dialog.

Can I use a separate print.css file?

Yes. Link a separate print stylesheet with <link rel="stylesheet" href="print.css" media="print">. The browser only loads this file when printing, keeping the main stylesheet smaller. Embed @media print rules in your main stylesheet for smaller print blocks.

Related tools