Using CSS for a Happy HTML 💞 PDF Marriage

When HTML Met CSS: A Modern Love Story (Now in Printable PDF Form)

Ever try printing a webpage and end up with a sad salad of broken layouts, missing elements, and links that look like crime scene tape? Yeah. Me too.

But recently, I found myself styling a resume that needed to be pixel-perfect in both web and print form. I did not want to maintain two versions of my resumé: one for this site and one suitable for submitting in job applications. Multiple sources of truth cause a duplication of effort at best, and inconsistent results at worst. So I stayed with HTML & CSS, after all, they've matured a lot. Turns out, with just a few @media print tricks, HTML & PDF can live happily ever after.

TL;DR – Here's What Worked

Use a regular HTML doc, Tailwind or custom utility classes, and sprinkle in print-only styles like. Print-aware design lets you skip extra formats like LaTeX, Word, or PDF generators. One source, two outputs. Web developers rejoice 🎉

@media print {
  @page {
    size: Letter;
    margin: 0.5in;
  }
  main {
    font-size: 10pt;
    color: var(--text);
    print-color-adjust: exact;
  }
  .print-only {
    display: initial !important;
  }
  .no-print, header, nav, footer {
    display: none !important;
  }
}

The Setup: One Stylesheet to Rule Them All

Here's the basic workflow I used:

Tailwind as the base – great for consistency across screen + print
Custom print overrides using @media print
display: none for .no-print elements, like navbars or sticky headers
Styling that adapts, not fights, the medium

You can check out my full custom.css (used to generate PDFs from my resume site), but here are a few highlights.

Print-Specific Gotchas (and How I Fixed Them)

Color Problems: Print ≠ Screen

Browsers love to "optimize" print output by removing backgrounds and muting colors. This tells Chrome and friends: “No, seriously, I want that background.”

@media print {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

Page Margins & Sizing

Don't let the printer decide what your margins should be. Use @page to enforce layout discipline. Pro tip: use "A4" if you're a metric person or printing in Europe.

@media print {
  @page {
    size: Letter;
    margin: 0.5in;
  }
}

Page Break Hell? Use `break-inside: avoid`

If your beautiful .section divs are getting split between pages like a sad breakup, try:

.section {
  break-inside: avoid;
  page-break-inside: avoid;
}

Want to force a break after a block? Level up CSS's emotional intelligence.

.page-break {
  break-after: page;
  page-break-after: always;
}

Strip It Down, Keep It Clean

When targeting print, most modern UIs have way too much fluff. Remove what doesn't belong. Give your users (or future self) a focused, clutter-free output.

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

Bonus: Semantic Typography FTW

Print deserves good fonts. With this print-only block, I control the tone and legibility. It doesn't look like a Word doc. That's the point.

@media print {
  main {
    font-size: 10pt;
    font-family: BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }
  h1 {
    font-size: 18pt;
    font-weight: 700;
  }
  h2 {
    font-size: 12pt;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
  }
}

Final Thoughts

This approach let me:

Use HTML & CSS I already knew
Avoid writing a second version for print
Export resumes & reports straight from the browser

Yes, it takes some fiddling. But with a reusable stylesheet, you're set up for any printable project that doesn't deserve a full InDesign treatment.