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 named
print-stylesinside another folder named
print-stylesbecause Windows can be stupid. Move the
print-stylesfolder that contains the
index.htmlfile & 2 folders (
css) into your projects folder, NOT the
print-stylesfolder that contains another folder named
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?
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.