Welcome to Part 33 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Print Styling & Paged Media.

Even in a digital world, users regularly print web pages to PDF or paper (e.g., invoices, recipes, booking confirmations). Standard screen styles often look terrible when printed. CSS provides the @media print query and @page rules to create beautifully formatted print documents by hiding interactive navigation items, adjusting page breaks, and defining margins.

---

Chapter 172: The @media print Query

The @media print rule block holds style overrides that target paper or PDF generation.

» Hiding Web-Only Elements

When printing, interactive elements like headers, footers, sidebars, and call-to-action buttons should be hidden:

@media print {
  header,
  footer,
  aside,
  .btn-cta,
  .share-buttons {
    display: none !important;
  }
  
  body {
    background-color: #ffffff;
    color: #000000;
    font-size: 12pt; /* Point sizes are ideal for physical printing */
  }
}

› Exposing Anchor Links

Since readers cannot click physical paper to visit a link, CSS can automatically print link URLs next to the link text:

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555555;
  }
  /* Don't show anchor links for internal anchor jumps */
  a[href^="#"]::after {
    content: "";
  }
}

---

Chapter 173: Page Breaks

When printed, content can break awkwardly in the middle of a sentence or picture. CSS page break properties control these separations.

» Preventing Breaks inside Elements

Keep sections (like figures or tables) intact across pages:

@media print {
  figure,
  table,
  blockquote {
    break-inside: avoid; /* Prevent section splitting across page sheets */
  }
}

› Forcing Page Breaks

Force a page break before specific elements, like a new chapter heading:

@media print {
  h2.chapter-start {
    break-before: page; /* Starts a new page before this element */
  }
}

---

Chapter 174: Controlling Headers, Footers, and Margins (@page)

The @page rule targets the physical printed page box itself, controlling margins and page orientation.

» Page Margins and Sizes

Set custom margins for the paper sheet:

@page {
  size: A4 portrait; /* Sets paper size and orientation */
  margin: 2cm; /* Sets physical margin gap */
}

› Targeting Specific Pages

You can target the first page or left and right pages individually:

/* Remove header offsets on the cover page */
@page :first {
  margin-top: 5cm;
}

/* Alternate margins for double-sided page prints */
@page :left {
  margin-left: 3cm;
  margin-right: 1.5cm;
}
@page :right {
  margin-left: 1.5cm;
  margin-right: 3cm;
}

---

Chapter 175: Print Layout Practice & Self-Check

» Practice Exercises

1. Exercise 1: Print-Friendly Invoice: Create a layout for an invoice. Apply print-specific overrides that remove the sidebar, scale down typography, force a page break before terms & conditions, and prevent table row splitting.

› Self-Check Questions

1. Which media query overrides screen styles for printing?
   • Answer: @media print.
2. Why use pt instead of px or rem for print styling?
   • Answer: Point (pt) is a physical unit of measurement directly tied to typography print sizing (1pt = 1/72 inch).
3. What property prevents an element from being split across page boundaries?
   • Answer: break-inside: avoid; (or legacy page-break-inside: avoid;).
4. How can you force a new page sheet to start before a heading?
   • Answer: Using break-before: page; (or legacy page-break-before: always;).
5. What rule configures print sheet dimensions and page margins?
   • Answer: @page.
6. Can you style standard page margins inside @media print?
   • Answer: Physical page sheet margins must be styled in @page, while body element margins are styled inside @media print.
7. How do you hide navigations from printing?
   • Answer: Apply display: none; inside the @media print query.
8. What does the pseudo-class @page :first target?
   • Answer: The very first page of the printed document.
9. What does size: landscape do in @page?
   • Answer: It rotates the print layout 90 degrees to print wide content landscape-style.
10. How can you display hidden URLs on printed documents?
    • Answer: By using the ::after pseudo-element with content: " (" attr(href) ")";.