Learn how to improve the user experience of your websites using print style sheets.
Overview
Syllabus
Introduction
- The value of printable webpages
- 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
- 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
- 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
- Next steps
Taught by
Jen Kramer
