Download the print-styles.zip file & unzip it. Move the folder titled print-styles to where you keep your projects & then open that folder as a new project in your editor.
Note to Windows users: when you unzip
print-styles.zip, you may have a folder namedprint-stylesinside another folder namedprint-stylesbecause Windows can be stupid. Move theprint-stylesfolder that contains theindex.htmlfile & 2 folders (images&css) into your projects folder, NOT theprint-stylesfolder that contains another folder namedprint-styles!In other words, you want to move the inner
print-stylesfolder, not the outer one.And the fact that I even need to go over this makes me even more irritated with Windows & the user-unfriendly ways it handles ZIP files.
Your job is to create print styles that only show important content when the webpage is printed, while keeping the original screen styles. What is “important”? I’ll leave that up to you to decide. Think about what you would expect if you printed this page—what would you expect to stay & what you would expect to disappear? What about other changes?
Hint: Look at the video for Common Print Styles & view the Media Types & Media Features: Same HTML, Different CSS presentation for ideas (slides PDF & notes).
You will note that I have already placed the media-specific rule set for printing at the end of the style sheet, so all you have to do is enter your declaration blocks inside there. You really shouldn’t have to change the HTML at all (if you really think you need to, ask me).
To test, use Print Preview or Print to PDF.
Hint: When you use Print Preview, you may see a blue box that messes things up. If you are using Brackets when you see that, it’s due to Brackets drawing the blue box in the Viewport when you initiate Live Preview. To fix that, click in the
<head>first, & then initiate Live Preview.