HTML to PDF Missing CSS Styles — How to Fix
You convert a styled webpage or HTML document to PDF and get a plain-text rendering that looks nothing like the original — no colors, no fonts, no layout, just raw text in the browser's default style. Or styles are partially applied: some elements look right, others are completely unstyled. CSS loss during HTML-to-PDF conversion is common, and it stems from how the conversion tool loads and interprets your HTML. This guide covers the causes and gives you practical fixes for each.
Why CSS Styles Disappear in HTML to PDF Conversion
HTML to PDF conversion requires a tool that can render HTML the same way a browser does — interpreting CSS, loading external resources, and executing JavaScript (if needed). Many conversion tools don't do this fully: **External CSS not loaded.** If your HTML references an external stylesheet (`<link rel='stylesheet' href='styles.css'>`), the converter must be able to load that file. If it's running on a server, it can't access your local filesystem. If the path is relative, the converter may not resolve it correctly. **CSS from web fonts not available.** Fonts loaded via Google Fonts, Adobe Fonts, or any CDN require a network request. Converters that work offline or have firewall restrictions may fail to load these fonts, falling back to system defaults. **JavaScript-rendered styles missing.** Modern web apps often apply styles via JavaScript (React, Vue, CSS-in-JS). If the converter captures the HTML without executing JavaScript, the dynamically-applied styles aren't present. **CSS specificity and cascade issues.** The converter's rendering engine may interpret CSS specificity differently than a browser. Edge cases in the cascade can produce different results. **Print media query not configured.** Browsers and HTML-to-PDF converters support a `@media print` CSS block. If your stylesheet has print-specific overrides that hide elements or change layout, those apply in PDF conversion and may not be what you want. **Inline vs. external styles.** Some converters handle only inline styles (`style='...'` attributes) and ignore `<style>` blocks and external stylesheets entirely.
Step-by-Step Fixes for Missing CSS Styles
Work through these fixes based on how your HTML document is structured:
- 1Switch to inline CSS if using an external stylesheet. Copy all your CSS rules and place them inside a `<style>` block in the `<head>` of your HTML document. Then inline critical properties directly on elements using the `style` attribute for the most critical elements. Inline styles are always available to the converter without any external file loading.
- 2Verify the converter can access external resources. If using a server-based converter, host your CSS file publicly and use an absolute URL (https://yourdomain.com/styles.css) instead of a relative path. Test that the CSS URL is accessible from outside your network.
- 3Use a browser-based HTML to PDF tool like LazyPDF's html-to-pdf converter, which renders your HTML using the browser's own engine — the same one that displayed the page correctly. This handles CSS and web fonts exactly as the browser does.
- 4Check your @media print CSS. Add `@media print { body { /* your print overrides */ } }` and inspect what styles are applied. If your stylesheet has `@media print { .sidebar { display: none; } }`, that sidebar will be hidden in the PDF — which may or may not be what you want.
- 5Pre-load web fonts before conversion. For custom fonts, either embed the font file directly (as base64 in a @font-face declaration) or ensure the converter has internet access to the font CDN.
- 6For JavaScript-rendered pages, use a headless browser approach. Tools like Puppeteer or Playwright can fully render a webpage including JavaScript execution, then export to PDF. LazyPDF's HTML to PDF tool handles static HTML and CSS well.
The Most Reliable Method: Browser Print-to-PDF
For the most accurate HTML-to-PDF conversion, your own browser is often the best tool: 1. Open the HTML file in Chrome, Firefox, or Edge 2. Press Ctrl+P (Cmd+P on Mac) to open the print dialog 3. Select 'Save as PDF' as the destination 4. Configure page size, margins, and whether to include backgrounds 5. Click Save This approach uses exactly the same rendering engine that displayed the page — every style, every font, every layout detail is preserved. The only limitation is that browser Print-to-PDF doesn't easily handle pagination for dynamic content. For batch conversion or automated workflows, Puppeteer (Node.js) or wkhtmltopdf provide scripted versions of this approach.
Preparing HTML for Reliable PDF Conversion
Writing HTML with PDF conversion in mind eliminates most style issues: **Use self-contained HTML:** Inline all CSS, embed images as base64 data URLs, embed fonts. A single HTML file with no external dependencies converts identically on any system. **Add a print stylesheet:** Include a `@media print` block that explicitly sets colors, fonts, page breaks, and hides navigation elements. This gives you precise control over the PDF output. **Test with browser print preview:** Before converting with any tool, check what Chrome's print preview looks like. It's the gold standard — what you see there is what most HTML-to-PDF tools produce. **Avoid CSS Grid and Flexbox where possible for page layouts:** While modern browsers handle these well, some PDF engines have partial support. Traditional box-model CSS has more consistent cross-engine compatibility.
Frequently Asked Questions
Why does my HTML look correct in the browser but wrong in the PDF?
The converter's rendering engine differs from your browser. It may not load external files, may not execute JavaScript, or may interpret some CSS properties differently. The fix is to use a browser-based converter (like LazyPDF) or self-contained HTML with inline styles.
My background colors and images are missing in the PDF — why?
Browsers suppress backgrounds by default when printing (to save ink). This same behavior applies to HTML-to-PDF conversion. In your @media print CSS, add 'background: [color] !important' to force background rendering. In Chrome's print dialog, enable 'Print backgrounds' in More Settings.
Can I use CSS Grid layout in HTML that I convert to PDF?
It depends on the conversion engine. Browser-based converters (Print to PDF, Puppeteer) fully support CSS Grid. Older engines like wkhtmltopdf have limited CSS Grid support and may render Grid layouts incorrectly. For maximum compatibility, test with your specific tool.
How do I control page breaks in my PDF output?
Use CSS page break properties: 'page-break-before: always' forces a new page before an element, 'page-break-after: always' forces one after, and 'page-break-inside: avoid' tries to keep an element from splitting across pages. These are supported in most HTML-to-PDF converters.