How to HTML To PDF Css Guide
CSS controls how your HTML-to-PDF output looks — page margins, fonts, and print-specific layouts. SublimePDF uses Chromium rendering, so standard CSS works plus @page rules for PDF control. Mastering print CSS lets you create pixel-perfect invoices, reports, and documents that look identical on screen and in the generated PDF.
Follow the step-by-step instructions below, then use the free tool directly — no registration or download required.
Open Tool →How to HTML To PDF Css Guide — Step by Step
Set page dimensions with @page
Use the @page CSS rule to control page size and margins: @page { size: A4; margin: 2cm; }. Supported size values include A4, A3, Letter, Legal, or custom dimensions like 'size: 210mm 297mm'. Margin shorthand works normally.
Control page breaks
Use break-before: page to force an element to start on a new page, break-after: page to insert a break after it, and break-inside: avoid to prevent an element from being split across pages. Apply these to headings, sections, and tables.
Style for print media
Wrap PDF-specific styles in @media print { } to separate screen and print layouts. Hide navigation, sidebars, and interactive elements. Adjust colors — switch from light-on-dark to dark-on-light for print readability and ink savings.
Handle tables across pages
For long tables, use thead { display: table-header-group; } to repeat the header row on every page. Add break-inside: avoid on <tr> elements to prevent rows from splitting awkwardly between pages.
Set backgrounds and colors for PDF
By default, Chromium's print mode strips background colors and images. Add -webkit-print-color-adjust: exact (or print-color-adjust: exact) to preserve colored backgrounds, shading, and background images in your PDF output.
Pro Tips
- 💡 Always set box-sizing: border-box on all elements when designing PDF layouts — this prevents unexpected width calculations that push content off the page edge.
- 💡 Use cm or mm units instead of px for margins and spacing in print layouts. These translate directly to physical dimensions, making your PDF look consistent across different viewer zoom levels.
- 💡 Test your CSS at different page sizes by changing the @page size rule — content that fits perfectly on Letter may overflow on A4 (narrower width) and vice versa.
- 💡 Use overflow: hidden on the body element to catch content that accidentally extends beyond page bounds, preventing a mysterious extra blank page at the end of your PDF.
Privacy & Security
All processing happens directly in your browser. Your files are never uploaded to any server — they remain on your device throughout the entire process. SublimePDF uses WebAssembly technology for fast, secure, client-side processing.
Works Everywhere
This tool works on any modern browser — Chrome, Firefox, Safari, or Edge — on desktop, tablet, or mobile. No software to install. PDF is an open ISO standard supported by all major platforms.
How to HTML To PDF Css Guide — FAQ
Why do my background colors disappear in the PDF?
Can I use CSS Grid and Flexbox in PDF templates?
How do I prevent a blank page at the end of my PDF?
Can I have different margins on the first page?
Related Guides
How to HTML To PDF Fonts Guide
Typography makes or breaks PDF quality. SublimePDF's Chromium renderer supports web fonts, system fonts, and embedded fonts so your generated PDFs match your brand's typeface exactly. This guide covers loading custom fonts, handling fallbacks, and avoiding common rendering issues like missing glyphs, font substitution, and blurry text.
How to Convert HTML To PDF
Converting HTML to PDF is a core workflow for developers, marketers, and anyone who needs a permanent, printable snapshot of web content. Whether you're archiving a webpage, generating reports from a web app, saving receipts from online purchases, or creating documentation from HTML templates, PDF conversion captures the visual layout, links, and styling in a portable format.
How to PDF Webhooks Guide
Webhooks let SublimePDF push notifications to your server when asynchronous events complete — a PDF finishes rendering, a batch job completes, or a conversion fails. Instead of polling the API for status, your application receives an HTTP POST callback the moment results are ready, enabling real-time workflows and reducing unnecessary API calls.