One of the most neglected areas of web development, print CSS is a very good place to start with the principles of adaptive design and media queries. Users print web pages more frequently than most designers account for, and print stylesheets are a great “fit and finish” step for sites that remain a mark of quality and attention to detail.
Goals: Create a print media query and stylesheet
Total time for practice: 2 hours
Prerequisites: The CSS reading list to this point.
Core Material
Introduction to CSS media queries
CSS for print stylesheets
Force Accurate Colors For Print
Use CSS Filters For Print
Add QR Codes To Printed Pages
Print stylesheet development
Printing web page components
Additional Reading
For more information, I’d suggest following up with my Smashing Magazine article on print stylesheets, together with Rachel Andrew’s, and this article on how Medium rewrote its print stylesheets.
When You’re Done
Print stylesheets are an excellent introduction to media queries, leading naturally to the more complex world of responsive web design.
Photograph ofJessica Hische’s letterpressed note card monogram by Cranky Pressman, licensed under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.