Understanding screen, print, aural, and the cascade - CSS Tutorial

- [Instructor] In working with CSS, you've heard a ton about the cascade and which styles override what as part of that process. However, it's unlikely you've looked at media types in isolation as part of that process. So let's do that in this video. The files I have, up here, are the same ugly Web page we've been looking at. I promise this is the last segment with an ugly Web page. As I've pointed out to you before, notice over here, on line 8, there is no media type on this style sheet link in the head of the document. There's also no media query with the media type inside of the CSS. Therefore, these styles are for all media types. When we try to print, you'll see the yellow printing probably with a white background thanks to the browser taking out the dark blue background for print, as you've seen in previous videos. Let's go on ahead and set the style sheet for screen media only. The easiest way to do that, we can do that right here, in the external style sheet, and simply say media equals quote screen. And if we go on ahead and save that, I'm going to go to my Web browser and refresh my page, and I'm going to to on ahead and print this via PDF in Preview. So as you take a look at this page here, you might notice that this looks like an unstyled Web page, doesn't it? There is no font specified, here. The text is black instead of yellow, as you've seen, previously. And it's a serif font, it's a default Times-New Roman. Why is that? Well, that is because we set our styles to be for screen only. And sure enough, it'll print just fine, but it's going to print as a default unstyled Web page inside of your Web browser. Let's see that same effect here, with browser tools. So if I go to Tools, Web Developer, Toggle Tools, and click my little button here, you'll see that same exact process happening here, as I click this button. So this didn't work before, when our styles were set to all because it was all media. Those were the same styles for screen and for print. The Web Developer Tools were doing exactly what you told it to do. Now that you have those styles set for screen only, when you click the button here, to show the print styling, it switches over to the print styles and there aren't any, so it looks like an unstyled Web page. So let's go back to our code, here. Let me show you how to do the same thing rather than doing it here, inside of our external style sheet. You can just take that out. Over here, in our style sheet, you can do exactly the same kind of thing by putting a media query around all this. And we'll say at media screen. Save that. That would be exactly the same way it is, and effectively the same thing as having it associated with your external style sheet. Now, but what about the cascade? So let's go on ahead and try this. If we have set this to all, and then before this, I'm going to go ahead and set up a couple of other styles. I'm going to say at media screen and I'm going to say article, color white. So if it's on the screen, it's going to have white text. And then at media print, and article will have the color red. So if this happens to go to print, we're going to have red text on the screen. And then for all media which is coming after all of this, the text color will be yellow. So this is your time to vote. Go ahead and think about this for a minute. If I go ahead and view this Web page now, on my screen, what color is the type? And what color is the type when I go to print? I'm going to go ahead and save both of these documents and then we can go back here, to Firefox. I'm going to refresh my page. And then we can go ahead and turn on our print tools. And you see here, I'm clicking my button, toggling back and forth between these and nothing is happening. Why is that? Well, at media all comes after the screen or the print styles here, that we just placed above all of this, and so the color here, in the article overrides everything that comes before it. So let's rearrange real quick. If we go ahead and take those two and we put them after, so now, before, we have yellow. We have white for the screen and red for print. What color will the text be now, on the screen? What color will be the text for print? Go on ahead and think about that for a second. And then let's go back to our Web page. Refresh the page. And right now, I've go the print style sheet toggled on, so you see we have red text. And if I toggle that off, we have white text. And obviously, if I do this the longer way, if I go to File, Print, and I do this as an opening and print preview, I will see the red text but with a white background rather than the blue background. So as you would expect, where all else is equal in the cascade with selector specificity, the order in the style sheet does, in fact, matter. As you might also expect, this same type of example holds true if you look at a separate external style sheets and listing them in the order of the head in your HTML document. So if we go back into our code and I had a print style sheet here, and I wanted to list it after, your print style sheet should come here, after your style sheet for all of your styles you would list your print style sheet after it so that your cascade work correctly. So as always, order does matter. I recommend writing a generic all style sheet and then overriding whatever is needed for a print style sheet. If you have separate screen and print style sheets, then you will completely style your document twice: once for screen and then, once for print. All is a great setting so that's the way we're going to approach styles in this course.