📌 What Is @media print?

The @media print rule allows you to define styles that applyonly when the webpage is printed or previewed in print mode. This is essential for creating clean, print-friendly documents such as invoices, resumes, tickets, reports, certificates, and more. 📄✨

🎯 Why Use @media print?

🧩 Basic Syntax

@media print {
  /* Print-only CSS here */
  body {
    font-size: 12pt;
  }
}

Anything inside @media print applies ONLY during printing or print preview.

🖨️ Hiding Elements in Print

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

✔ Useful for buttons, banners, ads, navigation bars, or videos.

🎨 Formatting Text for Print

@media print {
  h1 {
    font-size: 20pt;
  }

  p {
    line-height: 1.4;
    font-size: 11pt;
  }
}

Print requires different text sizes and spacing for better legibility.

📄 Ensuring White Backgrounds

Some browsers don't print background colors/images unless explicitly enabled by the user. But you can still enforce layout clarity:

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

📐 Page Break Control

You can control how elements break across printed pages using:

@media print {
  h1 {
    page-break-before: always;
  }

  table {
    page-break-inside: avoid;
  }
}

📌 Combining @page + @media print

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

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

  h1 {
    font-size: 24pt;
    margin-bottom: 10mm;
  }
}

Using @page inside @media print gives full control: page size → margins → typography → visibility → layout.

🧠 Advanced: Print-Only Layout Changes

@media print {
  .grid-layout {
    display: block;
  }

  .sidebar,
  .footer {
    display: none;
  }

  .content {
    width: 100%;
  }
}

✔ Converts grid layout into a single-column printable version
✔ Removes decorative UI elements

📑 Real Project Example: Invoice Print Styles

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  body {
    font-family: Arial, sans-serif;
  }

  header,
  .sidebar,
  .buttons,
  .ads {
    display: none !important;
  }

  .invoice-container {
    padding: 0;
    border: none;
    width: 100%;
  }

  h2 {
    font-size: 18pt;
  }
}

✔ Clean print output
✔ Removes UI clutter
✔ Applies precise page formatting
✔ Ensures fonts and spacing are print-friendly

📝 Best Practices

🔗 Helpful Resources