CSS: Print Style Sheets

Learn how to improve the user experience of your websites using print style sheets.

Introduction

• The value of printable webpages

1. Mechanics of Print-Based CSS

• Print style sheets and media queries
• Creating a print style sheet and linking it to your document
• Creating a print media query
• Previewing print style sheets without printing
• The pitfalls of using dev tools for previewing printing
• Understanding screen, print, aural, and the cascade

2. Best Practices for Print-Based Styling

• Best practices for styling for print
• Touring your example page
• Hiding irrelevant information for print
• Changing webpage layouts for print
• Overriding styles intended for screen display
• Adding print-only information that is hidden from screens
• Writing URLs after links and social media icons
• Complex media queries for print and page orientation
• Challenge
• Solution

3. Beautiful Formatting for Print

• Understanding paged media and CSS fragmentation properties
• Setting printing page breaks
• Creating columns within longer documents
• Adding hyphenation
• Controlling widows and orphans
• Using @page to create page margins
• Coming soon: Additional @page properties
• Challenge
• Solution

Conclusion

• Next steps