DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run Scan×
Skip to content
CSS

How to Convert a Web Page to a PDF Without Losing Its Styles

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To save a web page as a styled PDF, open the browser’s print preview, choose its PDF destination, and inspect the preview before saving. The result depends on the page’s print styles, browser settings, and support for print features. If you own the site, you can improve the output with a print stylesheet; if you do not, you can only adjust the browser’s print options or edit the page before printing.

Save a web page as a PDF with the browser

For an ordinary page, the browser’s print flow is the fastest way to make a PDF. It renders the page for printing and lets you review the result before saving. In Firefox, Mozilla documents choosing Save to PDF from the destination dropdown, reviewing the preview, and then saving the file: How to print web pages in Firefox. Other browsers have their own print dialogs, but the same basic workflow applies.

  1. Open the page you want to save and wait for its important content to load.
  2. Open the browser’s Print command, usually from its menu or keyboard shortcut.
  3. In the print dialog, choose the browser’s PDF destination, such as Save to PDF.
  4. Review every page of the preview. Check for missing content, awkward breaks, clipped columns, unwanted headers, or missing backgrounds.
  5. Adjust available print settings, then save the PDF.

Preview is part of the conversion, not an optional cosmetic check. A PDF can faithfully reflect the page’s print layout even when that layout differs from the screen version. If the output is wrong, first determine whether the page’s print stylesheet or a browser print setting is responsible.

What print preview can and cannot preserve

Web pages can use separate styles for screen and print. A site may intentionally remove navigation, change fonts, or rearrange content for paper-sized pages. It can also omit elements that are useful on screen but not in a document, so an absent menu or footer may be expected rather than a conversion failure.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Browser print settings can also change the result. Backgrounds or colors may be omitted to reduce ink use or improve legibility. Wide tables and other oversized content may be scaled or clipped. Always check the generated preview rather than assuming that the on-screen page will be reproduced pixel for pixel.

If you control the page, add print-specific CSS

A site owner can define a print presentation with the @media print at-rule. Rules inside it apply when the document is printed or rendered for print preview. MDN’s guide to printing with CSS covers print media and linking stylesheets for print.

@media print {
  nav, header, footer { display: none; }
  body { color: #111; background: #fff; }
}

@page {
  margin: 15mm;
}

This is an illustrative starting point, not a universal tested configuration. Hiding a header or footer is appropriate only if the document remains understandable without it. Test the actual page in the browsers your readers use; a rule that improves one page can remove context or create blank space on another.

Rank #2
1 Second Auto Size Scanner PDF JPG 16MP Resolution Portable Document Scanner for Converting and Editing
  • LIGHTWEIGHT AND FOLDABLE STRUCTURE: Foldable design (30x6x8cm) and lightweight (1000g) make it portable for travel or home use. Compact shape fits perfectly on your workbench without taking up much space
  • SIMPLE CONNECTION: Works with USB connection without the need for additional programs for quick installation. Simple controls make it easy to operate both beginners and regular users with regular size papers
  • QUICK DOCUMENT PROCESSING: Automatically scan suggestions one page per second, greatly increase productivity. Ideal for workplaces, schools, legal/financial areas where large capacity is required
  • TEXT CONVERSION TECHNOLOGY: Smart OCR function works in over 200 languages, changes scanned files to editable text for easy storage and editing Seamless digital conversion of paper documents improves workflow
  • EXCELLENT IMAGEING: Equipped with a 16MP clear camera, this portable document scanner produces crisp, accurate images of documents and keeps important content intact. Perfect for striking scans of contracts, receipts and books

Use a print stylesheet when screen and paper need different layouts

You can put print rules in an existing stylesheet under @media print, or link a separate stylesheet with media="print". A separate file can make a complex document’s print presentation easier to maintain. In either case, write for the page’s reading order and printed dimensions rather than merely shrinking the screen design.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  • Remove navigation and interactive controls that do not help in a static document.
  • Use readable text and sufficient contrast on a white or light page.
  • Check long content for breaks that split headings from the material they introduce.
  • Review wide tables, code, and other content that may exceed the printable width.
  • Preserve links and labels that readers will need when the PDF is shared away from the website.

Set page dimensions and margins with @page

The @page rule can set print-page dimensions, orientation, and margins. For example, the sample above sets a margin. Browser support for paged-media features is uneven, so verify the output in print preview instead of treating the stylesheet as a guarantee.

Chrome for Developers reported that Chrome 131 added CSS support for content in printed page margins in an article published October 30, 2024: Add content to the margins of web pages when printed using CSS. That release-specific addition does not establish identical support in other browsers or later versions. If margin content matters, test it in the actual target browser and provide a usable document even where it is unsupported.

Request exact colors, but do not rely on it as a guarantee

If a specific background or color treatment is essential, an author can consider print-color-adjust: exact. The property communicates that the authored appearance matters, but browsers retain discretion and user print settings take priority. It cannot force every user’s browser to print backgrounds or reproduce screen colors. MDN explains the behavior and limitation in its reference for the print-color-adjust CSS property.

Design the print version so information remains understandable without decorative backgrounds. If color distinguishes content, provide another cue—such as text, borders, or labels—rather than making color the only signal.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If you do not control the website

Writing a print stylesheet changes a page only when you can change that site’s source or otherwise apply your own styles. For someone saving another person’s page, the practical choices are the browser’s print settings or an editing tool that modifies the page before printing.

Mozilla identifies an extension as one possible way to edit a page before printing in its Firefox printing guidance. Extension availability and compatibility can change, so verify that an option is currently available for your browser and review its permissions before installing it. The evidence does not establish a universal extension recommendation.

Or skip the browser setup

If you need a clean capture for a document workflow, ScreenshotNeo offers a website screenshot API and MCP server. It can return PNG, JPEG, WebP, or PDF, though a screenshot is not the same thing as a browser’s print-styled PDF: use the print flow above when the page’s print stylesheet and paged layout are the goal. The example below is the supplied one-call screenshot request, saving an image response.

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 setup and request details. ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots, and every feature is on every plan. See ScreenshotNeo for the service. Sign up free for 1,000 screenshots a month with no card.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot a PDF that does not look right

Backgrounds or colors are missing

Check the print dialog for a backgrounds or graphics option, if the browser offers one. A page author can request preservation with print-color-adjust: exact, but that request does not override browser discretion or user settings. For an important brand color or shaded section, inspect the PDF itself and make sure meaning is not conveyed by color alone.

Content is clipped or split awkwardly

Return to print preview and inspect the affected page. Wide content may not fit the printable width, while long sections may break at inconvenient places. If you maintain the site, adjust its print layout and retest; if it belongs to someone else, try the available scale or page-layout controls in the print dialog. Do not assume one setting will fix all page types.

Navigation or other unwanted material appears

When you control the page, use print-specific rules to hide elements that do not belong in the document. When you do not, inspect the print preview for browser options that affect headers and footers, and consider a page-editing extension only after checking current availability and compatibility.

The PDF differs from the page on screen

That may be intentional: the site can apply a different stylesheet for print. Compare the preview with the on-screen page and decide whether the changed layout is a useful print view or a genuine omission. If you own the page, review the rules under @media print and any linked print stylesheet.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A page-margin feature works in one browser but not another

Print CSS support is not uniform. Test the target browsers directly, and provide a legible fallback that does not depend on margin content or another paged-media feature being available.

Choose the method that fits the job

Method Best suited to Control
Browser print preview Saving an existing page quickly Print-dialog options and preview
Print-specific CSS Producing a reliable print layout for a page you maintain Styles, page rules, and repeatable site changes
Page-editing extension Editing another site’s appearance before printing Depends on the extension’s current availability and compatibility

For a one-off PDF, start with the browser. For a site or document you own, build and test a print stylesheet. For a page you do not control, preview carefully and treat extensions as optional tools rather than required infrastructure.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.