Lessons

Lesson Info

Create CSS for Printing

So we talked a little bit about some pseudo-elements, and one thing we could do is we could write a bunch of CSS rules that will override all of these rules. However, I would argue that I think it's a lot easier with this nice clean HTML structure, to just write new CSS rules from scratch and have a print version of your CSS that we can use and attach to the page and just have that be the styles for printing. It's a lot easier to maintain, I think, to do this. So, we're gonna go back to our HTML file. Let's scroll to the top. Now earlier today we set up our two links. Now, so that we don't have to print every page or keep looking at the print dialogue box, what we're gonna do temporarily is just link to our print file as the mail file and just comment out the other ones. So we can use the browser as our print preview tool. So I'm gonna come in here and just copy the link to the print CSS. I'm going to remove the media equaling print, and then I'm temporarily going to just comment out t...

hese two rules here. So, most text editors you can hit the command or control key and the forward slash and that will just comment out lines you've selected. And so with one simple keystroke, we've now undone everything that we just spent this time doing. But again I like to sort of start clean and let's cover some basic ideas of what we're gonna do especially around pseudo-elements, and then I have some snippets to paste in so we're not gonna rebuild the entire print piece here. But let's go back to our project. Now let's open our style print CSS. Completely blank. Let's hit a few returns. And so what I wanna do here is use a pseudo-element like we did earlier to add in some content, but I wanna use this to add in some individual graphics for our content. Okay, so the first thing we'll do is let's start by targeting our contents. We'll actually paste in some rules for our main text. So let's target that dot content container and let's come in here and let's set a margin property of zero and a padding property of zero. Now we're setting this out to zero because when we print this, most printers and print drivers on your operating system will automatically add the proper margin properties for the piece of paper that you're printing. So we want to make sure that we just make our content take up as much room as possible. We're not gonna worry about the sizing. We're gonna let the print drivers of the people's computers take care of that. Okay I want to be able to see the logo. There's our Everyday Things logo. So with that in place, let's go back to our project. Let's go back into our snippets. Let's come down to file eight. Snippets eight. I've set up a bunch of print rules in here as well. So we're still gonna import Google's font, so I've put that in here. Let's come down here and select all of this content. We'll paste this in and talk about it real quick. So back to our print file. I'm gonna come in her and paste this above our dot content class. So we're pasting all that in here. So we're still gonna get our font, so we can still have a design that's gonna look pretty good. And so what we've done here is we've taken a couple of different items and changed the behaviors. We're doing the same things we've done before. We're setting different padding properties, we're setting different display types. For the logo, for example, we're setting a display type of block for this item here, we're setting our span to display none, and we can come in here and start to make additional changes here. Alright, good so far? So earlier in the class, we took our a dot class logo and we put a background image in here using that white svg file. It had the stacked version of our logo. The problem is the svg is white so that's not actually gonna print for somebody and sometimes browsers will let you print or not print background images altogether. By default, most places have the background images turned off. So that means anytime we've used a background image in CSS that's not gonna print at all. So what we can do is use a pseudo-element to basically add an image to that anchor tag, so it's basically like we went into the HTML and added an image tag without actually doing that. So we get all of the advantages of a responsive web design for screens, but we can use the CSS technique with a pseudo-element to add the logo in. So to do that let's come in here and let's target the a dot logo. We're gonna put two colons. Put in the word before then a space. Put in our brackets. And now we're gonna add a content property, then a space. And the content we're gonna add is gonna be a URL. So we don't have to add just text characters, we can actually add a URL or a piece of media as the content of our pseudo-element. So we're gonna do images, slash, logo underscore horizontal, underscore print dot svg. Let's zoom out here. Let's go back to our project and inside the graphics folder inside of b we have print graphics. It would help if I went and copied our print graphics so let's go do that real quick. So let's copy all of our graphics for print. Let's go back to our root project folder. I'll just paste all of these in there. Now let's go back to our design and let's hit reload. And so now at the top we can now see the Everyday Things svg showing up. So again it's that pseudo-element that we've added to the anchor tag that then makes that graphic show up on the page. And I just pointed to a completely different graphic. Let's set a couple more properties ourselves and then we'll go grab some snippets and finish this out. So next let's target the header image, so I'll do header, image, put in our brackets. We're gonna set a display type of none, because that full color graphic we placed in the HTML and instead, we're gonna do the same thing here. We're actually going to place that image in using a pseudo class, or pseudo-element. So we'll type header, two colons, then the word after, put in our brackets. So content, colon, URL, parentheses, and then inside we'll do images, slash, hero, underscore photo, underscore print dot png. Now that graphic's now showing up in place. Let's do, let's quickly target our header, our content piece and the paragraphs. So next we'll do header space dot content. 'Cause again the HTML hasn't changed. We still have all the same HTML markup that we need to deal with in the print version as well. So we're gonna do padding. We're gonna do 95 pixels on the top. We're gonna do 30% on the right. So we still need to kinda give our text some room so it's not hitting that graphic that we just placed in. 20 pixels on the bottom, and zero pixels on the left. And then header space p, we'll just quickly get this in here, and all we're gonna do here is set our font size. We're gonna set this to 1.4 ms, and we'll set our line height to 1.3 ms. So yeah that's gonna give us something that's gonna look nice when we print this out. For the navigation. The navigation's not gonna mean anything in print. So what we can do is type nav, space, pound sign mobile, underscore menu, underscore icon. And we're gonna set this display type to none. And we can't just simply take the entire navigation and change it because our logo is in the navigation. So we need to change the display type of the items inside the navigation, but not actually turn off the logo. And since we have multiple items inside there in addition to the icon, let's come in here and let's specify multiple CSS properties or multiple selectors. So, we have nav, mobile, menu, icon. Let's hit a comma, then a space, and let's add a second one into that same set of properties. So pound sign mobile, underscore menu, then a comma, and then on the next line nav, mobile menu links. So that'll take care of hiding all of the navigation items but still keeping our logo showing up here at the top. And I told you, one more property and then we'll copy in some snippets. So the last little property we want to take care of is the fact that if somebody is printing this page out, we have a bunch of places where we have some hyperlinks in the page, but we have no idea where these would link to. So Everyday Things, for exanmple, is gonna link to the main website. We have our see full list, which is gonna link to a website, and so we wanna have a way that we can show the users where those hyperlinks go. But again we don't wanna go and add that content into the HTML and hide it and do all that other stuff. So what we're going to do is we're going to use a pseudo-element in conjunction with the ability for us to display content based on an attribute. So this is gonna be very cool. So we're gonna do anchor tag, we're gonna add two colons for a pseudo-element, set up the after element, and we're gonna say content equals, and here we're going to add two quotes, so this is the text of the content. I'm gonna put a space, parentheses, space, 'cause I want to have the URL show up in the content but inside a parentheses, then we'll hit a space, then I'm gonna type attributes, put in some parentheses and inside of the parentheses we're gonna say href, then a space, we'll add two more quotes, put our ending parenthese and then a semi-colon. So check this out. So by doing that, we're basically adding the content of the href into the anchor tags when somebody prints this out. So, on the logo, this is linking to codifydesign. Down here, see full list, this is linking to the Wikipedia page. So without changing anything in our HTML we can use CSS to pick out the value of the attribute and place it on the hyperlinks if somebody goes in and prints this page. And then we can change all of the different sort of styles about these pieces here. So a couple of properties we'll wanna set will be something called a word-wrap. 'Cause URLs can be really long. We don't wanna have these sort of breaking the layout or printing off the page so people can't see them. So we're gonna set a word-wrap to break-word. And so we'll see that if I close my browser down really far here, we'll see for example the word culinary here is breaking on two lines because we've allowed it to over here in the CSS. We're gonna set a font weight to normal. So even if it is the link inside of something that's bold or a heading, we're still gonna just force that to not show up in bold, and we'll do font-style, and we'll set this to italic. So that's gonna be sort of our style here, to show that. Next let's target the buttons. So let's scroll down here so we can see some of the buttons. So the buttons are showing up after the content, so here's see full list up here for example. So let's just indicate these in a slightly different way. So we'll say display type is inline-block, and we're targeting the a dot btn. We're gonna set a padding property of seven pixels on the top and 24 pixels on the right. Very similar to what we did for the screen. The background color we're gonna set these to white. For the border, we're gonna set these to one pixel, solid, a pound sign and three nines so that they're a medium gray. And we'll set border-radius to about 12 pixels, and the font weight we're gonna set this to bold. So now we're giving our users just some indication that some of these items are actually buttons, so we can see the button showing up here with the URL after it. And then the last thing we'll do here is we will set for any of the anchor tag buttons. For the after pseudo-element, instead of an inline display, we're gonna set the display type to block. So any time we have these buttons, the URL's gonna show up on its own line like this so we can see the link and what it goes to, and then the content showing up down here. So now let's go back to our snippet files. Let's open up snippet nine. And here I have a bunch of rules that will change a bunch of the other properties going through. The one that's most notable is down in the footer, we're using a pseudo-element down here and putting in a QR code. So let's copy that. Let's go back to our print file. Let's paste all that content, and to finish this out, we'll go back to the HTML file. Let's uncomment out our two lines of CSS, let's remove the print altogether. So now print is inside of the media print, screen is inside of the media screen. We can save this, go back to our browser. Let's hit reload. We see all of our screen behaviors showing up. And then if I hit command p or control p in Windows to print, we can now see that we have now adjusted the style of all of our content for paper as well.