Module 36 : CSS Print Stylesheets – Optimizing CSS for Print Media
1. What Are CSS Print Stylesheets?
Definition:
A print stylesheet is a CSS file or a set of styles applied only when the user prints a webpage or previews it for printing. This is achieved using media queries targeting print.
Why It Matters:
Web pages often include elements (like navigation menus, sidebars, and animations) that are unnecessary or unsuitable for printed documents. Without a print stylesheet:
Pages may print with cluttered layouts.
Text may be too small or misaligned.
Color schemes might consume unnecessary ink.
Some parts may be completely unreadable.
Examples:
Printing an article from a blog.
Generating a hard copy of an invoice or report.
Printing a resume or document from a portfolio website.
2. Media Queries for Print
Syntax:
css
code
@media print { /* print-specific styles go here */ }
Alternate Method:
Linking a separate CSS file for print:
html
code
<link rel="stylesheet" href="print.css" media="print">
3. Best Practices for Print CSS
a. Remove Non-Essential Elements
Hide menus, sidebars, ads, and interactive components:
css
code
@media print { nav, aside, footer, .ads, video { display: none; } }
b. Use a White Background and Black Text
Avoid dark backgrounds or colored text that may not print clearly.
css
code
@media print { body { background: #fff; color: #000; } }
c. Set Page Size and Margins
Using the @page rule:
css
Copy code
@page { size: A4; margin: 1in; }
d. Use a Readable Font and Size
Avoid fonts that are hard to read when printed.
css
Copy code
@media print { body { font-family: serif; font-size: 12pt; } }
e. Control Page Breaks
Ensure content doesn’t get cut off awkwardly.
css
code
@media print { h1, h2, h3 { page-break-after: avoid; } .section { page-break-inside: avoid; } }
f. Show URLs After Links (Optional)
Sometimes useful to include the actual URLs.
css
code
@media print { a::after { content: " (" attr(href) ")"; } }
4. Practical Example: Article Page
HTML Structure:
html
code
<body> <header>My Blog</header> <nav>Main Menu</nav> <article> <h1>How to Optimize CSS for Print</h1> <p>This guide helps you prepare your webpage for printers...</p> </article> <aside>Related articles</aside> <footer>Contact | Privacy Policy</footer> </body>
CSS for Print:
css
code
@media print { header, nav, aside, footer { display: none; } article { width: 100%; margin: 0 auto; } body { background: #fff; color: #000; font-family: Georgia, serif; font-size: 12pt; } a::after { content: " (" attr(href) ")"; font-size: 10pt; } }
5. Exercise
Objective:
Create a web article and apply a print stylesheet to make it print-ready.
Steps:
Build a basic HTML article page with header, nav, main content, aside, and footer.
Add regular CSS for screen media.
Add print-specific styles using @media print.
Test the print preview in the browser.
Evaluation Checklist:
Non-essential elements are hidden.
Fonts and colors are optimized for printing.
Layout adjusts to single-column.
URLs appear after links.
Page breaks handled correctly.
6. Advanced Tips
a. Conditionally Display Elements
Show specific content only when printing:
css
code
@media print { .print-only { display: block; } .no-print { display: none; } }
b. Using JavaScript to Trigger Print View
javascript
code
function printPage() { window.print(); }
c. Inline Styles (Quick Fixes)
html
code
<div style="page-break-before: always;">New Page Section</div>
7. Common Mistakes
Forgetting to hide unnecessary elements.
Not testing print view on different browsers.
Overuse of color or background images.
Not optimizing fonts and spacing.
Not checking page breaks.
8. Assignment
Title: Print-Optimized Resume
Instructions:
Create a one-page online resume.
Include name, contact info, education, work experience, and skills.
Apply a print stylesheet to:
Remove navigation links.
Format content for A4 printing.
Use black-and-white theme.
Display URLs for linked portfolios.
Submission Format: ZIP file with HTML, CSS, and screenshot of print preview.
9. Summary
In this module, you learned how to:
Use media queries for print.
Remove unnecessary elements.
Format content for legibility and ink-saving.
Handle page breaks and fonts.
No comments:
Post a Comment