How to Save a Webpage as a PDF with CSS Print Styles

To save a webpage as a PDF, open the browser’s print dialog and choose its PDF output. If you control the page, add CSS print styles to hide screen-only controls, set page dimensions and margins, and guide page breaks. Print preview is essential: browser settings and support for some CSS page controls affect the final file.

Save a webpage as a PDF in your browser

1. Open the webpage you want to save.
2. Open the browser’s print dialog using its print command.
3. Choose the PDF option as the destination or output, then review the preview.
4. Save or export the resulting PDF using the dialog’s controls.

Exact menu names and PDF settings vary by browser and operating system. Check the preview for clipping, blank space, missing images, page breaks, legible links, and whether backgrounds appear as intended. Print settings can affect the result; there is no single setting sequence that applies to every browser.

#	Preview	Product	Price
1		URL to PDF Converter		Buy on Amazon
2		Image to PDF Converter		Buy on Amazon

Add CSS print styles to a page you control

CSS for the print media type applies when a page is printed, including when the print output is saved as a PDF. You can place it in a stylesheet or link a dedicated stylesheet that only applies to print. See MDN’s printing guide and its documentation of the @media at-rule.

Hide controls and simplify the layout

@media print {
  nav,
  header,
  footer,
  .no-print {
    display: none !important;
  }

  main {
    width: auto;
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

Use selectors that match your page’s actual markup. The example removes navigation, header and footer elements as well as anything marked no-print, then resets the main content width and margin. The !important declaration helps the hide rule win over competing styles, but CSS specificity and the cascade still apply.

#1 Best Overall

URL to PDF Converter

• View webpages on or offline by converting them to a PDF file
• Support for websites that have be written in languages other than English
• Provides the ability to modify the orientation, margins, page size etc. of PDF files

Buy on Amazon

Use a separate print stylesheet

If you prefer to keep print rules out of your main stylesheet, link a file that the browser applies for print:

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

Put the same kinds of layout and visibility rules in print.css. The path must point to the stylesheet used by your site.

Set paper size, margins and page breaks

The @page rule controls page-box properties such as dimensions, orientation and margins. Page output also fragments content across separate sheets, so break controls can help keep related content together or start a section on a fresh page. MDN documents the @page at-rule, the size descriptor, and paged media and fragmentation; support for some page controls varies.

@page {
  size: A4 portrait;
  margin: 18mm;
}

.keep-together {
  break-inside: avoid;
}

.new-page {
  break-before: page;
}

Apply keep-together to content that should not be split if it fits on a page, and new-page to content that should begin on a new page. These rules are guidance to the paged layout process, not a guarantee that every browser will produce identical pagination. Inspect the target browser’s print preview and the saved PDF.

Rank #2

Image to PDF Converter

• All item converter to pdf

Buy on Amazon

Call the print dialog from a page

A page can offer a print button that opens the browser’s print dialog:

document.querySelector("#print").addEventListener("click", () => {
  window.print();
});

This assumes the page contains an element with the ID print. The window.print() method opens the dialog; it does not silently create or download a PDF. If invoked while the document is loading, it waits for loading to finish, but that does not ensure application-specific asynchronous content or assets have rendered.

Check the PDF and troubleshoot print issues

• Navigation or buttons still appear: Confirm the print rule is loaded, its selectors match the page, and competing rules are not overriding it. Check in print preview.
• Text or content is clipped: Review the print layout’s width and margins, then check the selected paper size and scaling in the dialog.
• A section splits awkwardly: Try break-inside: avoid on the relevant block or break-before: page before a new section. Verify the result in the target browser; fragmentation behavior can vary.
• Margins or orientation differ from expectations: Check the @page rule and the print dialog’s settings. Some @page support varies by browser.
• Images or other content are missing: Inspect the preview and generated PDF. A print call waits for document loading as documented, but does not certify that every asynchronous application asset is ready.
• Backgrounds or browser-added details look wrong: Review the browser’s print settings and preview. Those controls vary, and CSS alone does not establish a universal setting across browsers and operating systems.

Or skip the browser setup

If you need a screenshot or PDF through an API rather than the browser’s print flow, ScreenshotNeo accepts a URL in one request. Its PDF options include paper size, margins, landscape orientation and page ranges. For this task, it can provide a PDF capture, but it is not a substitute for authoring and previewing CSS print styles in the browser.

Quick Recap

Bestseller No. 1

URL to PDF Converter

View webpages on or offline by converting them to a PDF file; Support for websites that have be written in languages other than English

Bestseller No. 2

Image to PDF Converter

All item converter to pdf

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 parameters and PDF options. Cookie banners, popups and chat widgets are removed before capture; bot checks, blank pages and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Sign up for the free plan.

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.