CSS Print — Complete Guide to Print Stylesheets

Print stylesheets control how your web pages look when printed or saved as PDF. Without print styles, printed pages often include navigation bars, ads, and backgrounds that waste ink and paper.

What You’ll Learn

By the end, you’ll create @media print rules to hide non-essential UI, use page-break-before/page-break-after for proper page breaks, set print margins with @page, display link URLs after anchor text, adjust font sizes for paper, and test print styles using DevTools emulation.

Where This Fits

    flowchart LR
    A["CSS Responsive"] --> B["**CSS Print**"]
    B --> C["CSS Reference"]
    C --> D["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style D fill:#22c55e,stroke:#16a34a,color:#fff
  

The Basic Print Stylesheet

@media print {
  /* Hide non-printable elements */
  nav, footer, .sidebar, .ads, .no-print {
    display: none;
  }

  /* Base print styles */
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  /* Show link URLs after anchor text */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }

  /* Page breaks */
  h2 { page-break-before: always; }
}

What each part does:

• display: none on nav/footer — removes non-essential page furniture
• font-size: 12pt — appropriate size for reading on paper
• color: #000; background: #fff — high contrast, no background images
• a[href^="http"]::after — prints the full URL next to each link (so readers know where it goes)
• page-break-before: always — each section starts on a new page

Page Breaks

Control where printed pages break:

@media print {
  /* Before an element */
  h2 { page-break-before: always; }

  /* After an element */
  .section { page-break-after: always; }

  /* Avoid breaking inside an element */
  .card, table, pre, img {
    page-break-inside: avoid;
  }

  /* Keep with next element */
  h2, h3 { page-break-after: avoid; }
}

Analogy: Page breaks are like telling a printer “start a new page here.” Without them, the printer decides where to break, which might split a table or code block across pages.

Page Margins with @page

@page {
  size: A4;         /* Paper size: A4, letter, legal, or dimensions */
  margin: 2cm;      /* Margins for all pages */
}

@page :first {
  margin-top: 4cm;  /* Larger top margin on the first page */
}

What to Hide and What to Show

Hide These (Wasteful on Paper)

• Navigation menus
• Sidebars
• Footer widgets
• Advertisements
• Social media buttons
• Video embeds
• Comment forms
• Background images

Show Extra in Print

@media print {
  /* Show link destinations */
  a[href^="http"]::after { content: " (" attr(href) ")"; }

  /* Show abbreviation expansions */
  abbr[title]::after { content: " (" attr(title) ")"; }

  /* Add "Page X" footer */
  body::after {
    content: "Printed from dodatech.com";
    position: fixed;
    bottom: 0;
    font-size: 8pt;
    color: #666;
  }
}

Common Print CSS Mistakes

1. Not Testing Print Styles

/* ❌ Assuming it'll look fine — it won't */
/* No @media print rules at all */

/* ✅ Always test: DevTools → Rendering → Emulate CSS media type print */

2. Forgetting to Remove Backgrounds

/* ❌ Wastes ink printing colored backgrounds */
.card { background: #667eea; }

/* ✅ Remove backgrounds in print */
@media print {
  .card { background: none !important; }
}

3. Not Hiding Interactive Elements

/* ❌ Nav and buttons waste space on paper */
/* ✅ Always hide non-content elements */
@media print {
  nav, .btn, .dropdown, .search-bar { display: none; }
}

4. Using Tiny Fonts

/* ❌ 10px is hard to read on paper */
body { font-size: 10px; }

/* ✅ 12pt is standard for print */
@media print {
  body { font-size: 12pt; }
}

Testing Print Styles

Chrome: DevTools → Customize and control DevTools (⋮) → More tools → Rendering → Emulate CSS media type → print.

Firefox: DevTools → Style Editor → Toggle “Print” media simulation.

Security Angle — Print as Audit Trail

Security tools like Durga Antivirus Pro provide printable scan reports with print stylesheets that ensure critical information (threat names, file paths, timestamps, remediation steps) remains readable and well-structured on paper, with timestamps and verification URLs printed in the footer.

Try It Yourself

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What media query targets print?

Q2: How do you prevent an image from being split across two printed pages?

Q3: How do you display link URLs in print?

Q4: Why set background: #fff in print styles?

Q5: What does @page { margin: 2cm; } do?

FAQ

Do I need a separate CSS file for print?

No. Add @media print { ... } blocks in your existing stylesheet. It’s simpler and avoids an extra HTTP request.

How do I exclude certain elements from printing?

Add a class like .no-print or .print-hide and set display: none inside @media print.

How do I add page numbers in print?

Use @page with counter(page). Example: @page { @bottom-center { content: "Page " counter(page); } }. Support varies by browser.

What font size should I use for print?

12pt is standard for body text. Headings can be 14pt-18pt. Stay away from px — pt (points) is the print standard.

Can I use Flexbox in print?

Most browsers support it in print, but it’s safer to use simpler layouts (block, inline-block) for print stylesheets.

FAQ

{< faq >}

What is Css Print?

Css Print refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.

Do I need prior experience to learn Css Print?

Basic familiarity with web development concepts helps, but Css Print can be learned step by step even as a beginner.

How long does it take to learn Css Print?

With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.

Where can I use Css Print in real projects?

Css Print is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.

What are common tools used with Css Print?

The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

{< /faq >}

FAQ

What’s Next?

Continue with more CSS topics:

What’s Next

Congratulations on completing this Css Print tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!