Creating a print style sheet and linking it to your document - CSS Tutorial

- [Instructor] Let's get started with print styling by creating an external print style sheet document and linking it to our HTML. So, the editor that I'm using here is VS Code, it's available from Microsoft. It's free. I've gone ahead and installed it on my computer and I have my exercise files that are open. These are on my desktop and I've opened up my style sheet and my print dot html document. You can always make this a little smaller or disappear just by clicking this button right here gives you a little more room for the code. And let's start by looking at the code and I'm going to start at line number eight right here. So obviously this is the link, HTML that links to our style sheet document shown over here on the right side of the screen. As you can see with this particular line of code there is no media attribute inside of line number eight. The media attribute indicates what media is appropriate for use with this style sheet. And by default there's only four values. Those include screen, print, all or oral as it sound. And we won't talk about oral at all today but we'll talk about screen, print and all. When there's no media that is indicated here in this line of code, it is a style sheet applies to all media. So, basically we have a document here right now and it's set up in a way that probably a lot of people are doing development right now. It is an all purpose style sheet. So if we go ahead and just pop this inside of a web browser real quick and this is Chrome and take a look at it. I'm sorry, It's really, really ugly but this makes all of the points that I need to make very, very quickly. And so obviously this is the way it looks on the screen. If I try to print this, it's pretty simple to do in Chrome. Go to the three dots over on the right side of the screen, choose print and it should give you a print preview of that particular document. And as you can see here, it is going to print with a white background and yellow text. Now why a white background? Because we've specified a blue background on our current document. Well, there must be some sort of default style sheet or some type of style sheets somewhere along the way that is overriding that blue background and making it white for print but it is not doing the same for the text. It could be that we actually want colored text to print out but yellow is probably a really poor choice for a document of this length. So let's go ahead and set up our first print style sheet using an external print style sheet. It'll take us just a second to write and test. So if we go back into the VS Code, what I'm going to do is over here on my styles dot CSS I'm just going to go file, save as and I'm going to call this print dot CSS indicating this is my print style sheet. Then I can just go ahead and put in the overrides that I want for my particular document. So I don't necessarily want to override my font family at this point, but the background colors got to go. Let's say it's white instead of dark blue. And as for the article all that stuff is gray but for the color for the text I would like that to be black. Fantastic. Go ahead and save that. And then let's go ahead and apply this to our document. I can just copy the line of code. They're online eight in the HTML, paste in a new version of it here on line nine. Let's change the styles dot CSS to print dot CSS. Rel equals style sheet and then we need to add to this, our media equals quote, print. Just like that. And if we save our HTML, we can return to our Chrome document here, refresh the page and go back to print again. And you'll see here in our print preview that now we have a nice white background with black text. And so obviously our regular document on the screen does not look like that. It looks great though on print and that is the way you might go about making an external print style sheet for your project.