CSS styles not applied in generated PDFWhen converting HTML to PDF, styles that look correct in the browser often fail to apply. External stylesheets may be blocked, CSS properties may be unsupported by the PDF renderer, or print-specific rules may be missing. This guide covers the most common causes and concrete fixes.
PDF renderers that use a headless browser or HTML engine often run with restricted network access. External CSS links pointing to CDNs or relative paths that don't resolve in the rendering context are silently skipped, leaving the document unstyled.
PDF renderers do not implement the full CSS specification. Properties like CSS Grid, complex animations, CSS variables with fallbacks, and some flexbox edge cases may be ignored or partially rendered. The result is layout that looks correct in Chrome but breaks in the PDF.
Browsers apply @media print styles when printing. Some PDF renderers behave like a printer and only apply @media print styles, ignoring general screen styles entirely. If your CSS doesn't include @media print rules, the PDF may render with no styles at all.
Inline all styles directly in the HTML <style> block. This removes the dependency on external file loading and ensures every style is available to the PDF renderer regardless of network access.
<!-- Before: relies on external file -->
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<!-- After: inline critical styles -->
<style>
body { font-family: Arial, sans-serif; font-size: 14px; }
.invoice-header { background: #f5f5f5; padding: 20px; }
.total { font-weight: bold; font-size: 18px; }
</style>Some PDF renderers activate @media print mode. Add explicit print styles to ensure your layout survives the switch. Define page margins, hide navigation elements, and control page breaks.
<style>
@media print {
/* Ensure all styles apply in print/PDF mode */
body { font-size: 12pt; color: #000; background: #fff; }
nav, .sidebar, .no-print { display: none !important; }
.page-break { page-break-after: always; }
a[href]::after { content: " (" attr(href) ")"; }
}
/* Also define screen styles for visual preview */
@media screen {
body { font-size: 16px; }
}
</style>PDFluent's HTML renderer logs which CSS properties were applied, which were unsupported, and which external resources failed to load. This makes debugging far faster than trial-and-error in other tools.
use pdfluent::HtmlToPdf;
let result = HtmlToPdf::new()
.html("<html><head><style>body { font-family: Arial; }</style></head><body><h1>Invoice</h1></body></html>")
.with_css_diagnostics(true) // log unsupported properties
.render()?;
// Inspect what was applied
for warning in result.css_warnings() {
eprintln!("CSS warning: {}", warning);
}
result.document().save("output.pdf")?;