Hi everybody. Today we are going to talk about Media queries. Media queries are going to allow us to adjust the style of out webpages, depending upon, the properties of the media we're looking at. So we can look at the browser size, width, and other things to decide the best way to lay out our content. This all started with CSS 2.1. It allowed us to use different media types. So inside your HTML you could have multiple links to different style sheets. But it wouldn't apply all the style sheets just some of them so here's an example. Right here the style sheet style. Is only going to apply when the content is being displayed on a screen. And for many of you, that's the only way you know of content being displayed. But for those of us who are older or just plain old we remember a time when on your computer you might want to print out directions someplace and so when you printed out the directions you had the option to turn on or off the pictures and other things like that. So for us when it came time to actually print out the directions, the computer would recognize that we're trying to print them out, and use a completely different style sheet. And this was a big step forward for us, because it allowed us to, again, have different content and style depending upon the platform. With CSS3, we have even more capabilities because the style can depend upon many more features. We can look at the width, the height, the orientation and even the screen resolution. In addition, we can add the Boolean operators to increase the power. And what Boolean operators are are just simple and and ors. So you might want to say something along the line of, if its a screen And Fill in some other properties there. So let's look at some examples. Every media query has two components. The first is the media type. We often think of this as something along the lines of, will this be a screen? Is it a print out? You might even think about braille or if it's going out to a TV. We can also use the word all to trigger every possible media type that could possibly come up. The second component is the actual query of the media feature and the trigger size that we want to be looking for. So for example, we might be looking for very specific width, height, orientation or resolution. Here's an example for you right here. The media type that I want to talk about is screen, the CSS will only apply if we're looking at a screen, but in addition, we also want to make sure that that screen has a maximum width. Of four hundred and eighty pixels. And, a resolution, of one hundred and sixty three, DPI. So, that's a lot of circling, and that's a lot of new words. But, that's what we're going to talk about, for the next few slides, to help you really get this idea, of how every query has a media type and then some sort of trigger size and media feature. There are three ways to implement media queries. The first is to use the import rule. Inside your CSS, you would use import, you'd include the URL for the style sheet that you want to import, as well as the different size and conditions on when you want to import it. So in this case if my screen has a minimum width of 600 pixels we would want to use smallstyle.css. The second approach is to put the media query directly in the style sheet itself. So we would have before any of our rules, we'd have the @media screen and (min-width:500px). And then inside here, we would put all of our usual CSS rules for the color, or the font, the size, different things like that. So it's all contained inside a single file. The third approach is to include the query in the actual link in the header of your HTML. So here, instead of just saying link this style sheet, we've included the trigger and the different rules right inside our HTML link tag. In general I'm going to always stick to this second approach right here. This is the one that I personally use for doing my responsive design, but that doesn't mean you shouldn't feel free to play with all three of these different approaches. So let's review for just a second to make sure that we're on the same page with how we implement media queries. In this case I've put my media queries directly into my CSS file. And what's going to happen is as always CSS start from the top and works its way down. We're going to hit that first rule right here that's going to check and say, hey, I need to see if my display is an actual screen, not a printout or something like that. If it is, and the screen width is at least 500 pixels. Then I want to apply these specific rules right here. But I don't stop. Because this is the CSS, it'll continue to work its way down and check and say hey am I at least 900 pixels? If I am, I'm going to apply these rules too. So it gets tricky at first when you're first learning how to do responsive design. We're going to do one together to get your hands wet and have you coding, just make sure that you start small and we'll go ahead and we'll do something together. Good luck,
