📌 What Is @page?

The @page at-rule allows you to control the page boxwhen printing a webpage. It lets you style margins, size, orientation, and define different styles for left/right pages or first pages.
🖨️ In short: it’s CSS for printed documents.

🎯 What You Can Style with @page

🧩 Basic Syntax

@page {
  margin: 20mm;
}

This sets the default margin for printed pages to 20mm.

📐 Setting Page Size

@page {
  size: A4;
}

@page {
  size: 8.5in 11in; /* width height */
}

✔ Useful for invoices, tickets, resumes, certificates, and printable layouts.

🔄 Orientation (Portrait / Landscape)

@page {
  size: A4 landscape;
}

🎴 Styling Page Margins

@page {
  margin: 10mm 20mm;
}

✔ Margins affect the entire printed page layout ✔ You can’t style inside the margin directly — only margin boxes (limited support)

📄 Special Pseudo-Classes for @page

@page supports special pseudo-classes allowing different styling for specific pages.

1️⃣ First Page

@page :first {
  margin-top: 40mm;
}

2️⃣ Left Page

@page :left {
  margin-left: 30mm;
}

3️⃣ Right Page

@page :right {
  margin-right: 30mm;
}

💡 Useful for book-style printing where left/right pages differ.

🛑 What You CANNOT Style in @page

📘 Real-World Example: Invoice Printing

/* Print styles */
@media print {
  body {
    font-family: sans-serif;
  }

  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  @page :first {
    margin-top: 30mm;
  }

  .no-print {
    display: none !important;
  }
}

✔ Hides UI elements
✔ Adjusts page margins
✔ Ensures the first page has extra space for branding

🏛️ Using @page Inside @media print

@media print {
  @page {
    size: letter;
    margin: 20mm;
  }

  h1 {
    font-size: 24pt;
  }
}

🔍 While @page can exist outside @media print, it’s generally best practice to keep it inside print media queries.

📝 Best Practices

🔗 Helpful Resources