name	print-styles
description	Write print-friendly CSS using @media print. Use when creating printable pages, invoices, receipts, articles, or any content users might print.
allowed-tools	Read, Write, Edit

Print Styles Skill

This skill provides patterns for creating print-friendly stylesheets using @media print. Print styles are often overlooked but essential for articles, invoices, documentation, and any content users might want to print.

Philosophy

Print stylesheets should:

Remove the unnecessary - Navigation, ads, interactive elements
Optimize for paper - Black text on white, appropriate fonts
Preserve content - Don't hide essential information
Save ink/toner - Minimize backgrounds and decorative elements

Basic Print Stylesheet

Separate Print File

<head>
  <!-- Screen styles -->
  <link rel="stylesheet" href="/css/main.css"/>

  <!-- Print styles: non-blocking, only loaded when printing -->
  <link rel="stylesheet" href="/css/print.css" media="print"/>
</head>

Inline Print Block

/* In your main stylesheet */
@media print {
  /* Print-specific styles */
}

With CSS Layers

/* main.css */
@layer reset, tokens, layout, components, pages, responsive, print;

@import "print.css" layer(print);

/* print.css */
@layer print {
  @media print {
    /* All print styles */
  }
}

Essential Print Resets

Hide Non-Essential Elements

@media print {
  /* Navigation and interaction */
  nav,
  header nav,
  .site-header,
  .site-footer,
  .sidebar,
  .navigation,
  .menu,
  .breadcrumb,
  [role="navigation"] {
    display: none !important;
  }

  /* Interactive elements */
  button,
  .btn,
  input,
  select,
  textarea,
  form,
  .search,
  .filter,
  .pagination,
  [role="button"] {
    display: none !important;
  }

  /* Ads and promotional */
  .ad,
  .advertisement,
  .banner,
  .popup,
  .modal,
  .cookie-notice,
  .newsletter-signup {
    display: none !important;
  }

  /* Media that doesn't print well */
  video,
  audio,
  iframe,
  .video-embed,
  .map-embed {
    display: none !important;
  }

  /* Skip links and a11y helpers for screen */
  .skip-link,
  .sr-only,
  .visually-hidden,
  [aria-hidden="true"] {
    display: none !important;
  }
}

Reset Colors and Backgrounds

@media print {
  /* Reset to print-friendly defaults */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Preserve essential backgrounds */
  img,
  svg,
  .logo,
  .chart,
  .diagram {
    background: initial !important;
  }
}

Typography for Print

Print-Optimized Fonts

@media print {
  body {
    /* Serif fonts are more readable in print */
    font-family: Georgia, 'Times New Roman', Times, serif;

    /* Larger base size for readability */
    font-size: 12pt;

    /* Tighter line height than screen */
    line-height: 1.4;

    /* Black text on white */
    color: #000;
    background: #fff;
  }

  h1, h2, h3, h4, h5, h6 {
    /* Sans-serif for headings provides contrast */
    font-family: 'Helvetica Neue', Arial, sans-serif;

    /* Ensure headings stay with content */
    page-break-after: avoid;
    break-after: avoid;
  }

  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  h4 { font-size: 12pt; }

  /* Code blocks */
  pre, code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10pt;
  }
}

Optimal Line Length

@media print {
  /* Optimal reading width for print */
  article,
  .content,
  main {
    max-width: 6.5in; /* Standard letter with margins */
    margin: 0 auto;
  }

  p {
    /* Slightly tighter than screen */
    margin: 0 0 0.75em;

    /* Justify for clean edges */
    text-align: justify;

    /* Prevent orphans and widows */
    orphans: 3;
    widows: 3;
  }
}

Page Layout

Page Margins

@media print {
  @page {
    /* Standard margins */
    margin: 0.75in;

    /* Or specific margins */
    margin-top: 1in;
    margin-bottom: 0.75in;
    margin-left: 0.75in;
    margin-right: 0.75in;
  }

  /* First page might need different margins */
  @page :first {
    margin-top: 1.5in;
  }

  /* Left and right pages for booklet printing */
  @page :left {
    margin-left: 1in;
    margin-right: 0.5in;
  }

  @page :right {
    margin-left: 0.5in;
    margin-right: 1in;
  }
}

Page Size

@media print {
  @page {
    /* US Letter */
    size: letter portrait;
    /* or: size: 8.5in 11in; */

    /* A4 */
    /* size: A4 portrait; */

    /* Landscape */
    /* size: letter landscape; */
  }

  /* Force specific elements to landscape */
  .wide-table {
    page: landscape;
  }

  @page landscape {
    size: letter landscape;
  }
}

Page Breaks

Controlling Page Breaks

@media print {
  /* Always start sections on new page */
  section,
  article,
  .chapter {
    page-break-before: always;
    break-before: page;
  }

  /* Don't break inside these elements */
  figure,
  table,
  blockquote,
  pre,
  .card,
  .testimonial {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Keep headings with following content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Keep images with captions */
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Don't break after images */
  img {
    page-break-after: avoid;
    break-after: avoid;
  }
}

Modern Break Properties

@media print {
  /* Modern break properties (preferred) */
  .new-section {
    break-before: page;     /* Start on new page */
  }

  .keep-together {
    break-inside: avoid;    /* Don't split this element */
  }

  h2 {
    break-after: avoid;     /* Keep heading with content */
  }

  /* Values: auto | avoid | always | all | page | left | right | recto | verso */
}

Links in Print

Show URLs

@media print {
  /* Show URL after link text */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
  }

  /* Don't show URL for internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Don't show URL for image links */
  a[href] img::after {
    content: "";
  }

  /* Abbreviate long URLs */
  a[href*="://"]:not([href*="yourdomain.com"])::after {
    content: " (external link)";
  }
}

Link Styling

@media print {
  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Remove link styling for navigation that's hidden anyway */
  nav a::after {
    content: "" !important;
  }
}

Tables for Print

Print-Optimized Tables

@media print {
  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  thead {
    /* Repeat header on each page */
    display: table-header-group;
  }

  tfoot {
    /* Keep footer at bottom */
    display: table-footer-group;
  }

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

  th, td {
    border: 1px solid #000;
    padding: 0.25em 0.5em;
    text-align: left;
  }

  th {
    background: #eee !important;
    font-weight: bold;
  }

  /* Zebra stripes for readability */
  tbody tr:nth-child(even) {
    background: #f5f5f5 !important;
  }
}

Wide Tables

@media print {
  /* Reduce font size for wide tables */
  .data-table {
    font-size: 9pt;
  }

  /* Or rotate wide tables to landscape */
  .wide-table {
    page: landscape;
  }
}

Images for Print

Image Handling

@media print {
  img {
    max-width: 100% !important;
    height: auto !important;

    /* Don't break images across pages */
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Ensure images print */
  img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide decorative images */
  img[alt=""],
  img:not([alt]),
  .decorative-image,
  .background-image {
    display: none !important;
  }

  /* Show essential images */
  img.logo,
  img.chart,
  img.diagram,
  figure img {
    display: block !important;
  }
}

Charts and Diagrams

@media print {
  /* Force color printing for charts */
  .chart,
  .diagram,
  .graph {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ensure SVG prints */
  svg {
    max-width: 100%;
    height: auto;
  }
}

Invoices and Documents

Invoice Template

@media print {
  /* Invoice header */
  .invoice-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 2px solid #000;
  }

  .invoice-logo {
    max-width: 200px;
  }

  .invoice-details {
    text-align: right;
  }

  /* Address blocks */
  .address-block {
    margin-bottom: 2em;
  }

  .address-block h3 {
    font-size: 10pt;
    text-transform: uppercase;
    margin-bottom: 0.5em;
  }

  /* Line items table */
  .invoice-items {
    width: 100%;
    margin: 2em 0;
  }

  .invoice-items th {
    background: #000 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .invoice-items .amount {
    text-align: right;
  }

  /* Totals */
  .invoice-totals {
    float: right;
    width: 250px;
  }

  .invoice-totals tr:last-child {
    font-weight: bold;
    font-size: 14pt;
  }

  /* Footer */
  .invoice-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9pt;
    color: #666;
    padding-top: 1em;
    border-top: 1px solid #ccc;
  }
}

Receipt Template

@media print {
  @page receipt {
    size: 80mm auto; /* Thermal receipt width */
    margin: 5mm;
  }

  .receipt {
    page: receipt;
    font-family: 'Courier New', monospace;
    font-size: 10pt;
    width: 70mm;
  }

  .receipt-header {
    text-align: center;
    margin-bottom: 1em;
  }

  .receipt-items {
    width: 100%;
  }

  .receipt-items td {
    padding: 2px 0;
  }

  .receipt-total {
    border-top: 1px dashed #000;
    margin-top: 0.5em;
    padding-top: 0.5em;
    font-weight: bold;
  }

  .receipt-footer {
    text-align: center;
    margin-top: 1em;
    font-size: 9pt;
  }
}

Articles and Blog Posts

Article Print Styles

@media print {
  /* Article layout */
  article {
    max-width: 6in;
    margin: 0 auto;
  }

  /* Article header */
  article header {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #000;
  }

  article h1 {
    font-size: 28pt;
    margin-bottom: 0.25em;
  }

  .article-meta {
    font-size: 10pt;
    color: #666;
  }

  /* Author info */
  .author {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 1em 0;
  }

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  /* Hide social sharing */
  .share-buttons,
  .social-links,
  .related-posts,
  .comments {
    display: none !important;
  }

  /* Pull quotes */
  blockquote {
    font-size: 14pt;
    font-style: italic;
    margin: 1.5em 0;
    padding-left: 1em;
    border-left: 3px solid #000;
  }

  /* Code blocks */
  pre {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 1em;
    font-size: 9pt;
    overflow: visible;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* Footnotes */
  .footnotes {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    font-size: 10pt;
  }
}

Testing Print Styles

Browser DevTools

Chrome: DevTools → More tools → Rendering → Emulate CSS media type: print
Firefox: DevTools → Toggle print media simulation
Safari: Develop → Show Web Inspector → Elements → Toggle print styles

Print Preview

Always test with actual Print Preview (Cmd+P / Ctrl+P) as it's the most accurate representation.

Checklist

/* Print styles checklist */
@media print {
  /* ✓ Hide navigation and interactive elements */
  /* ✓ Reset backgrounds to white */
  /* ✓ Set text to black */
  /* ✓ Use serif body font at 12pt */
  /* ✓ Control page breaks */
  /* ✓ Show URLs for links */
  /* ✓ Tables don't break across pages */
  /* ✓ Images have appropriate size */
  /* ✓ Essential content is visible */
  /* ✓ Decorative elements hidden */
}

Complete Print Stylesheet

/* print.css - Complete example */
@media print {
  /* === RESETS === */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* === HIDE NON-ESSENTIAL === */
  nav, .nav,
  header:not(.article-header),
  footer:not(.article-footer),
  aside,
  .sidebar,
  .menu,
  .search,
  .ad,
  .social,
  .comments,
  form,
  button,
  .no-print {
    display: none !important;
  }

  /* === PAGE SETUP === */
  @page {
    margin: 0.75in;
    size: letter portrait;
  }

  @page :first {
    margin-top: 1in;
  }

  /* === TYPOGRAPHY === */
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    page-break-after: avoid;
  }

  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }

  p {
    orphans: 3;
    widows: 3;
  }

  /* === LINKS === */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* === IMAGES === */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* === TABLES === */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
  }

  th, td {
    border: 1px solid #000;
    padding: 0.25em 0.5em;
  }

  /* === PAGE BREAKS === */
  h2, h3 {
    break-after: avoid;
  }

  figure, blockquote, pre {
    break-inside: avoid;
  }

  /* === UTILITIES === */
  .print-only {
    display: block !important;
  }

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

  .page-break {
    break-before: page;
  }
}

/* Hidden by default, shown only in print */
.print-only {
  display: none;
}

Print Utilities

CSS Classes

/* Screen only */
@media print {
  .no-print,
  .screen-only {
    display: none !important;
  }
}

/* Print only */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block !important;
  }
}

/* Force page break */
.page-break,
.page-break-before {
  break-before: page;
}

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

/* Keep together */
.keep-together {
  break-inside: avoid;
}

HTML for Print

<!-- Show different content in print -->
<p class="screen-only">Click the button below to continue.</p>
<p class="print-only">Visit example.com/continue to proceed.</p>

<!-- Force page break -->
<div class="page-break"></div>

<!-- Print-specific section -->
<section class="print-only">
  <h2>Appendix</h2>
  <p>Additional information for printed version...</p>
</section>

Checklist

When creating print styles:

Created separate print.css or @media print block
Hidden navigation, sidebars, and interactive elements
Reset backgrounds and colors for ink saving
Set appropriate fonts (serif body, 12pt)
Configured page margins and size
Added page break controls
Links show URLs (for external links)
Tables have header groups and don't break
Images sized appropriately and don't break
Tested in Print Preview
Added .no-print and .print-only utilities

Related Skills

css-author - Modern CSS organization with native @import, @layer casca...
accessibility-checker - Ensure WCAG2AA accessibility compliance
responsive-images - Modern responsive image techniques using picture element,...

Install Skill

SKILL.md

Print Styles Skill

Philosophy

Basic Print Stylesheet

Separate Print File

Inline Print Block

With CSS Layers

Essential Print Resets

Hide Non-Essential Elements

Reset Colors and Backgrounds

Typography for Print

Print-Optimized Fonts

Optimal Line Length

Page Layout

Page Margins

Page Size

Page Breaks

Controlling Page Breaks

Modern Break Properties

Links in Print

Show URLs

Link Styling

Tables for Print

Print-Optimized Tables

Wide Tables

Images for Print

Image Handling

Charts and Diagrams

Invoices and Documents

Invoice Template

Receipt Template

Articles and Blog Posts

Article Print Styles

Testing Print Styles

Browser DevTools

Print Preview

Checklist

Complete Print Stylesheet

Print Utilities

CSS Classes

HTML for Print

Checklist

Related Skills