CSS: Print Style Sheets

Course details

CSS makes it easy to create compelling online experiences, but style sheets also work for pages off the screen. The need for print persists and site developers should know how to create not just workable but appealing print results. Learn why print style sheets are important and how they can help improve the user experience for your website, in this course with veteran web designer and teacher Jen Kramer. Jen explains how to create and link CSS via an external print style sheet or a print-based media query. She then shows how to use standard best practices to optimize page layouts for print vs. screen, including hiding and showing content exclusive to each media type. Plus, learn how to take your print page formatting to the next level using the CSS paged media and fragmentations specifications, which allow you to set page breaks, adjust margins, and control the formatting and layout of text.

Topics include:
Creating and linking print style sheets
Creating a print media query
Changing page layouts for print
Overriding screen styles
Adding print-only information
Setting printing page breaks
Controlling widow and orphan text
Creating margins with @page

Concepts

0. Introduction

01 - The value of printable webpages

1. Mechanics of Print-Based CSS

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

2. Best Practices for Print-Based Styling

08 - Best practices for styling for print
09 - Touring your example page
10 - Hiding irrelevant information for print
11 - Changing webpage layouts for print
12 - Overriding styles intended for screen display
13 - Adding print-only information that is hidden from screens
14 - Writing URLs after links and social media icons
15 - Complex media queries for print and page orientation
16 - Challenge
17 - Solution

3. Beautiful Formatting for Print

18 - Understanding paged media and CSS fragmentation properties
19 - Setting printing page breaks
20 - Creating columns within longer documents
21 - Adding hyphenation
22 - Controlling widows and orphans
23 - Using @page to create page margins
24 - Coming soon - Additional @page properties
25 - Challenge
26 - Solution

Conclusion

27 - Next steps

CSS: Print Style Sheets

Authors

Jen Kramer