Hello, in this CSS Crash Course video, we're going to be looking at media queries. So what is a media query? Well allows you to apply different CSS rules for different device types, different sort of screen type devices. So if you wanted for mobile specific CSS rule, you could do that for desktop, a different rule for printing, a different rule for different browser sizes. And that's what we're going to be focusing on is just keep it simple. There's quite different styling for different browser size.

But like I said, you can do for different device types, and I recommend checking their app going to the web schools, website. googling IQ is a great way of learning. So first of all, what we want to do is go to our dot html file. I'm going to zoom in, and what we're going to do is create a div inside here, simply say hello. We'll save that Go to my web browser refresh. That's the text we've got.

We've got an index dot CSS, what we need to do to do a media query is pretty simple. You do app media, and the sort of like device or what you're affecting. Now, in terms of like, this is the screen here. This is could be like your device, that sort of stuff. So I'm doing the check based on something to do with the screen. And the condition is Max dash width of 512 pixels.

So basically, anything up to 500 pixels dcss will apply. So if I click type in body, background, color of blue, and now the div and I'm going to change the color to white. Save that, and then we'll go back review Fresh, it seems like nothing's changed. So let's actually resize the screen. We saw the browser should say, you know what I'm gonna inspect the element and close this down as well. When we start resizing, install, resize, you can see the width in the top right, and we're getting quite close to 512.

Now, so you'll see switch any minute. There we go. As you can see switching back and forth between, well, no styling and some extra styling that we've applied. Though we can also do the same for a minimum screen. I mean, yeah, minimum screen up media screen. And, you guessed it min dash width.

And for this, I'm gonna put 768 pixels and for the body, I'm going to put background Not bad, old ground as color of red. I'm gonna put dif, I'm gonna put a color of white. I'm also gonna put text decoration of what should I put a line through upon line for save that refresh. So we've got this minimum 768 pixel styling. So if we go below 768 pixels, we've got no styling. For if we hit 512 pixels or less, we have this particular block.

That's a great way of detecting different screen sizes. So you can change the positioning on different items. Maybe on mobile, you want certain things to be smaller or bigger. Maybe you don't even want certain things to appear in the same way or at all. And you can do that using this. So that's it for this question.

Course video on media queries. If you have any questions, feel free to post them on my education platform. So now learning Dakota, UK, if you want to see the source code, there will be a link to the GitHub page along with all your source code in this series. And as usual, thanks for watching and I hope you have a great day.