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 destination. If you control the webpage, CSS print styles can hide screen-only controls, set page dimensions and margins, and guide where content breaks. Preview the result in the browser you expect readers to use: print settings and support for some page rules vary.

Save a webpage as a PDF in your browser

1. Open the webpage and use your browser’s print command.
2. In the print dialog, choose the PDF destination or output option, then review the preview.
3. Adjust available settings such as paper size, orientation, margins, and scaling if the content does not fit.
4. Save or export the PDF using the dialog’s controls.

The exact command labels and PDF destination vary by browser and operating system. Check the preview before saving; browser print settings can affect margins, scaling, backgrounds, and other output details.

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

As an Amazon Associate I earn from qualifying purchases.

Add CSS styles for printed pages

CSS print media rules apply when a page is rendered for printing, including a print preview that will be saved as a PDF. Use them to remove interface elements and simplify layouts intended for screens. MDN documents print stylesheets and print media in its printing guide.

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

  main {
    width: auto;
    margin: 0;
  }

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

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

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

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

This is a starting point, not a guarantee of identical output across browsers. Adjust selectors to match your page, and verify the result in print preview. If you prefer a separate stylesheet, link it with a print media value:

#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

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

Hide or restyle screen-only content

Choose selectors that identify navigation, interactive controls, or other elements that do not belong in a document. The !important declaration in the example helps override competing declarations, but it is not a substitute for checking cascade and specificity conflicts. Avoid hiding content that readers need in the PDF.

Set page size, orientation, and margins

The @page rule can set page dimensions, orientation, and margins. For example, size: A4 portrait requests portrait A4 pages, while margin: 18mm sets all page margins. See MDN’s references for the @page at-rule and its size descriptor; support for parts of page styling can vary.

Guide page breaks

Printed output is paged: a continuous document is fragmented across discrete pages. Use fragmentation properties such as break-inside: avoid to ask that a component stay together, or break-before: page to start a section on a new page. These are layout hints, so inspect the output rather than assuming a particular break will work everywhere. MDN explains CSS paged media and page fragmentation.

Add a print button to a page you control

A button can open the browser’s print dialog for the current document. It does not silently generate or download a PDF; the reader still chooses the destination and confirms the action.

Rank #2

Image to PDF Converter

• All item converter to pdf

Buy on Amazon

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

MDN documents that window.print() opens the print dialog and waits for document loading to finish if invoked while the document is still loading. That behavior does not establish that application-specific asynchronous content, such as data fetched after load, has finished rendering.

Check the PDF in print preview

Review the actual preview and saved file in the target browser. Check whether content is clipped, large gaps appear, images render, links remain legible, and important backgrounds or colors are present. Also check headings and other content around page boundaries. CSS controls the document’s print presentation, but browser settings and support affect the final result.

Troubleshooting print-to-PDF problems

• Navigation or controls still appear: confirm the print stylesheet is loaded and that its selectors match the elements. Check whether another rule overrides the print declarations.
• Content is cut off or too wide: inspect the print preview, simplify fixed-width screen layouts for print, and adjust paper size, orientation, margins, or scaling in the print dialog.
• A section splits awkwardly: try a fragmentation rule such as break-inside: avoid for the relevant element, then check the preview. Browser support and the available page space can affect the result.
• A requested page size or margin has no visible effect: check the browser’s print preview and settings. Some @page behavior varies in support, and dialog settings can also affect output.
• The print button opens a dialog before content is ready: ensure application-specific asynchronous content has rendered before calling window.print(); waiting for document loading alone does not certify that it has.
• Colors or backgrounds differ from the page: inspect browser print settings and preview. The available evidence does not establish a universal setting for preserving backgrounds across browsers.

Or skip the browser setup

For a programmatic PDF capture, ScreenshotNeo accepts a URL in one GET request. Its PDF options include paper size, margins, landscape orientation, and page ranges. See the ScreenshotNeo API documentation for request details.

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.pdf

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture, with each step configurable. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server provides screenshot and PDF tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month, with no card.

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.