Make a webpage print-friendly by keeping its meaningful content and adding a print-specific CSS layer: use @media print to adjust the page for paper or browser-generated PDFs, and @page for page-level settings such as margins and orientation where supported. Hide screen-only controls, make the content fit the printable area, then check the actual result in print preview. CSS expresses your intended layout; the browser and the user’s print settings affect what comes out.
Choose where the print styles belong
You can put print rules in a separate stylesheet or add them to a stylesheet the page already loads. Both approaches work; choose based on how your project is organized and who will maintain the styles.
Use a separate stylesheet when print rules should be isolated
A print-only file makes it easier to find and review rules that apply only when printing. Link it in the document head:
<link rel="stylesheet" href="print.css" media="print">The media="print" attribute identifies the stylesheet as intended for print media. Keep the file alongside the other stylesheets in your project and confirm its path is correct.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use an @media print block for a compact change
If the print layer is small or your team prefers related styles together, add a print media query to an existing CSS file. The browser applies its rules in print contexts, such as print preview. Specificity and the cascade still apply: a print rule may need sufficient specificity to override an existing rule.
@media print {
body {
color: #000;
background: #fff;
font-size: 11pt;
}
nav,
.toolbar,
button {
display: none;
}
figure,
blockquote {
break-inside: avoid;
}
}This is a starting point, not a universal stylesheet. Inspect your own page and adjust selectors and layout rules to fit its content.
Keep the information; remove screen-only clutter
Before changing CSS, decide what someone needs from a printed article, invoice, recipe, or report. Usually the title, main text, figures, and essential reference information should remain. Navigation, toolbars, buttons, and other controls that do not add useful information on paper can be hidden in the print rules. MDN’s printing guide, last modified November 7, 2025, uses header, footer, and navigation as examples of elements that may be hidden.
Do not hide an element simply because it is interactive. If the element contains information needed in the printed version, retain that information or provide an equivalent printed form. For example, removing a control is different from removing the instructions or details that the control exposes.
Screen layouts often assume a fixed width or devote substantial space to backgrounds and decorative panels. Override those assumptions in print when they waste printable space. Let the main content use the available page width, and check whether colors and backgrounds remain legible if the reader’s print settings omit background graphics.
Set page geometry with @page
The @page at-rule is for the page box rather than an ordinary element. Use it when a document benefits from a particular page size, orientation, or margin. For example:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
@page {
margin: 1.5cm;
}Choose geometry for the content, not just the screen layout. A text-heavy page may suit portrait orientation; a wide table or diagram may call for landscape. A margin that is too large wastes space, while one that is too small may not suit the printer or the reader’s chosen settings.
Support for parts of @page and related page features varies by browser. The declaration is a request, not proof that every browser will produce identical output. Users may also change paper size, scaling, color, margins, or headers and footers in the print dialog. Check the formats and browsers that matter to your audience instead of assuming CSS can override every print preference.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteGuide page breaks without forcing every split
CSS paged media gives you rules for expressing pagination intent. Use break-before or break-after when a section should start after a deliberate boundary, and break-inside when a short item should preferably stay together.
@media print {
h2 {
break-after: avoid;
}
figure,
blockquote {
break-inside: avoid;
}
.new-section {
break-before: page;
}
}Avoid keeping together a block that may be taller than a page: it cannot remain intact if it does not fit. Likewise, break preferences do not guarantee an exact split in every browser. Use them to communicate intent, then inspect where the content actually falls.
Build and verify a print stylesheet
- Identify the printed task. Decide what the reader should be able to read or use on paper, and which controls or navigation can go.
- Add the print layer. Put the rules in a separate file linked with
media="print", or place them inside@media printin an existing stylesheet. - Reset screen-only layout assumptions. Adjust fixed widths, oversized backgrounds, and spacing that consume printable space. Keep text and important visual information readable.
- Set page rules only when useful. Add
@pagedimensions, orientation, or margins if the document needs them, and use break rules for sensible pagination. - Open the browser’s print preview. Review every page, not just the first one. Check page boundaries, margins, headings, code, wide tables, images, links, and anything that must stay together.
- Repeat for relevant browsers and paper formats. If the page is meant for a particular audience or workflow, test the browsers and paper settings that audience actually uses.
Print preview is essential because CSS describes desired styling while the browser’s support and the user’s settings affect the output. MDN’s references on @page and @media likewise describe print contexts and support caveats; CSS paged media covers printable areas and fragmentation.
Common print-CSS problems and fixes
- A screen-only item still appears. Check that the selector matches the element in the rendered page, that the print stylesheet loads, and that another rule is not winning through specificity or cascade order. Confirm the change in print preview.
- The page is clipped or leaves a large blank column. Look for fixed widths or layout assumptions inherited from the screen design. Add print-specific overrides so the main content can fit the printable area, then preview again.
- A heading is stranded at the bottom of a page. Try a break preference such as
break-after: avoidon the heading or an appropriate rule on the following content. Check the actual page split; a preference cannot guarantee identical pagination everywhere. - A figure, quote, or short item splits awkwardly. Apply
break-inside: avoidto the relevant component if it can reasonably fit on one page. Do not expect an overlong element to remain unbroken. - Margins or orientation differ from the CSS. Review both the browser’s support for the relevant
@pagedeclaration and the print-dialog selections. The user’s paper, scaling, margin, or orientation settings may affect the result. - Colors or backgrounds disappear. Do not rely on background printing for essential information. Make sure text, borders, and other content remain understandable without background graphics, which may be controlled by the print dialog.
- A print-only stylesheet seems to do nothing. Verify the link URL and filename, and make sure the file is served with the page. Alternatively, test a rule in an
@media printblock and check the result in actual print preview rather than judging only the screen view.
Or skip the browser setup
If your task is to capture a webpage as an image or PDF rather than implement and validate print CSS, ScreenshotNeo offers a website screenshot API and an MCP server for developers. This does not replace writing print CSS or guarantee that a capture reflects browser print-preview pagination. Its API accepts a URL and can return an image or PDF; use the browser’s print preview when the goal is specifically to verify print styling.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
For a basic screenshot call, install Python’s requests package, set your API key, and run this example. See the ScreenshotNeo documentation for the API details.
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)- Before capture, it accepts the cookie or consent banner as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Should I use a print stylesheet or an @media print block?
Either works. Use a separate file when isolating print rules helps your project’s organization; use a media block when keeping a small set of styles beside the screen rules is easier to maintain.
Does print CSS guarantee the same PDF in every browser?
No. Browsers can differ in support and pagination, and the user’s print-dialog choices can change the output. Preview the result in the browsers and formats relevant to your audience.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can a screenshot API confirm that my print layout is correct?
A website screenshot is not the same as checking browser print preview. Use print preview to verify page breaks, printable margins, and print-specific styling.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
