Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Different styles for screen vs print
Hide navigation, ads, and unnecessary elements
Optimize colors and layout for paper
Save ink and improve readability
Use @media print queries
Essential for reports, articles, and documents
CSS that only applies when printing
@media print { /* styles */ }Remove navigation, ads, sidebars
nav, aside, ads { display: none; }Use black text on white for ink savings
body { color: #000; background: #fff; }Control where content splits across pages
page-break-after: always;/* Normal screen styles */
body {
font-family: system-ui, sans-serif;
background: #f3f4f6;
color: #1f2937;
}
/* Print-only styles */
@media print {
body {
background: white;
color: black;
font-size: 12pt; /* Use pt for print */
}
/* Hide navigation and unnecessary elements */
nav,
aside,
.sidebar,
.ads,
.no-print {
display: none !important;
}
}/* Hide specific elements from print */
@media print {
/* Navigation */
header,
nav,
footer {
display: none;
}
/* Ads and promotional content */
.advertisement,
.popup,
.banner {
display: none;
}
/* Interactive elements */
button:not(.print-button),
.form-controls {
display: none;
}
}/* Show link URLs when printed */
@media print {
a[href]:after {
content: " (" attr(href) ")";
color: #666;
font-size: 90%;
}
/* Don't show URLs for internal links */
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
}/* Control page breaks */
@media print {
/* Avoid breaking inside these elements */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
/* Keep images with their captions */
figure {
page-break-inside: avoid;
}
/* Force page break before chapters */
.chapter {
page-break-before: always;
}
/* Force page break after sections */
.section {
page-break-after: always;
}
}pt (points) instead of px for font sizes. Standard print sizes: body text 12pt, headings 14-24pt. This ensures consistent sizing on paper!<div class="page">
<header class="site-header">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="content">
<article>
<h1>How to Save Ink When Printing</h1>
<p class="meta">Published on December 13, 2024</p>
<p>This article demonstrates print-friendly styling. When you print this page,
the navigation will disappear, colors will optimize, and the layout will adjust for paper.</p>
<h2>Key Benefits</h2>
<ul>
<li>Saves ink and paper</li>
<li>Improves readability</li>
<li>Professional appearance</li>
</ul>
<p>Try printing this page (Ctrl/Cmd + P) to see the difference!</p>
<div class="ad-banner no-print">
<strong>Advertisement</strong>
<p>This ad won't appear in print</p>
</div>
<a href="https://example.com/learn-more">Learn More</a>
</article>
</main>
<aside class="sidebar">
<h3>Related Articles</h3>
<ul>
<li><a href="#">CSS Tips</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</aside>
</div>Loading preview...
Ctrl+P (Windows) or Cmd+P (Mac) to preview how this page will look when printed. You'll see the navigation and sidebar disappear!<div class="container">
<div class="screen-toolbar no-print">
<button>Save as PDF</button>
<button>Email Invoice</button>
<button onclick="window.print()">Print Invoice</button>
</div>
<div class="invoice">
<div class="invoice-header">
<h1>Invoice #INV-2024-001</h1>
<p class="date">Date: December 13, 2024</p>
</div>
<div class="invoice-details">
<div class="section">
<h3>From:</h3>
<p><strong>Your Company</strong></p>
<p>123 Business St</p>
<p>City, State 12345</p>
</div>
<div class="section">
<h3>To:</h3>
<p><strong>Client Name</strong></p>
<p>456 Client Ave</p>
<p>Town, State 67890</p>
</div>
</div>
<table class="invoice-table">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Development</td>
<td>40 hours</td>
<td>$100</td>
<td>$4,000</td>
</tr>
<tr>
<td>Design Services</td>
<td>20 hours</td>
<td>$80</td>
<td>$1,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><strong>Total:</strong></td>
<td><strong>$5,600</strong></td>
</tr>
</tfoot>
</table>
</div>
</div>Loading preview...
Clean, readable print version without distractions
Professional business documents
Multi-page documents with proper pagination
Lessons, tutorials, and study materials
::after pseudo-elementpage-break-before/after/inside propertiespage-break-before: always - Force page break before elementpage-break-after: always - Force page break after elementpage-break-inside: avoid - Prevent breaks inside elementorphans: 3 - Minimum lines at bottom of pagewidows: 3 - Minimum lines at top of pagept - Points (1/72 inch) - best for print font sizescm - Centimeters - for page marginsin - Inches - for page dimensions✅ Universal Support: @media print is supported in all browsers. Page break properties work in all major browsers. Always test print preview in multiple browsers to ensure consistency!