Hi, my name is Dan. In this video we're gonna look at the second part  of meta queries where we look at CSS styles. In the previous video, we looked at using meta queries  to play around with the structure  or the column widths in bootstrap. This one here relates more to CSS styling,  so we're gonna look at it separately  with its own little project window here. Once we've finished with this little project,  after this video, we'll throw away this video  and get back to doing the exact same stuff,  but on our bigger, more complex website. So first of all, I'm gonna create an empty document here.

Uh, it's gonna a new document, no framework,  just plain old HTML page. I'm gonna save it. I'm gonna call this one  mob, uh, styles demo. Great. And I'm gonna be in split view  so you can see what's happening on both sides. Um, what you'll notice is that there's no media queries here  'cause we just, we've not a bootstrapped document.

Bootstrapped comes with its own  media queries that we follow. In this case, I'm gonna create our own ones just  to help you understand what they are and what they do. So first up, I'm going to drag this little slider along  and I'm gonna make three separate media queries. Um, has four, I'm just gonna do three to make it easier. So I'm gonna do a small mobile version,  a tablet version, and a desktop version. So I'm gonna drag it down, okay.

To a mobile size roughly. And I'm gonna hit this little plus button  and um, this max width, um, uh, I'm gonna leave here  and I'm gonna click okay  and I'm gonna, it's gonna create a CSC sheet for me. I'm gonna call this one, um, mob demo. We'll throw this one away in a sec  so I'm not too worried about the naming. Okay. And I'm gonna hit save.

Now what it means is, this is anywhere up  until here is gonna be my CSS media query for mobile. What I wanna do is a tablet version. So I'm gonna drag it up a bit higher, okay. To about there and hit plus. And what I wanna do, instead of just Max,  I'm gonna do min and max. So the minimum width is just gonna be a pixel  higher than my mobile.

So when it gets up to 3, 3 8, it's gonna switch to um,  tablet view and that's the maximum size there. I'm just put it as 700 to round things off. Okay? So this is mobile, this is tablet  and I'm gonna do desktop view. And desktop view is just gonna be one pixel  more than my tablet. And it doesn't really matter.

We have this, okay,  it's handy, but if I click plus  and I don't like it, I can change it to, I want a max width. You can see from here all the way  above, but I don't want it there. I want it one pixel after this. So I'm just type it in here. So it's gonna be 7 0 1, it's gonna be my desktop view. So I've got three media queries.

Um, you can't see them down here. The body is nice and clean, okay, on the h TM L. But if I go to my CSS, you'll see three of them. This one here is my, uh,  this one here is gonna be my mobile. This one here is gonna be my tablet. And this one here is my desktop.

So, um, let's add some content to my HTML. Okay, so I'm gonna go back to split view. Go to source code. And over here in my body I'm going to insert, uh, heading  and uh, change the text. Okay? What I'd like to do is style it so that when it um,  gets down to desktop, it's quite a large bold color.

And when it's tablet, it's a little bit smaller  and when it gets down to mobile, it's even smaller. But at the moment it's not doing anything. So what we have to do is I'm gonna do for mobile first. And so I've got my slider down  to mobile here just to preview it. And what I'm gonna do is I'm gonna go  to my CSS designer view. And up until now we've had this closed this media, okay?

And we've just been working on our large desktop view. And what we're gonna have to do is  open 'em up so you can see. And what we're gonna do is we're gonna create a style. It's gonna be in my mobile view, the green one, uh,  with a maximum of 3, 3 7. And I wanna create a selector and it's gonna be my H one. And what I want to do is, when it is H one, I'd like it  to be a font color of let's go red.

Okay? I want it to be a font size of something small. Maybe 20 pixels is my heading. Uh, great. So when it's down at mobile, it's 20 pixels and red. And when I make it up to tablet, which, what happens, okay?

It's not, okay. So that only gets affected when I am at this maximum width  of 3, 3 7. And you'll see at my CSS view, see it on here. So what happens is this H one here only gets activated when  this rule here is applied. Okay? So there's a no maximum width of 3, 3, 7, anything  above that, it will switch out to this tablet view.

And because there's no H one styling in here,  it goes from this, okay? Red and 20 to whatever the default is. So to do the adjustments, um, I'm gonna be in tablet view. I'm going to be a mob demo. I'm going to be this min and max, which is my tablet view. I'm gonna make a new selector.

This one's gonna be H one. And I'm going to do something with a text. I'm gonna make it green  and I'm gonna make the font size a bit bigger. So maybe up to 40. Great. So when it's down here, 20  and red, when it's a tablet, it is green  and a font size of 40.

And you can see when I get out to desktop,  the exact same thing I can go to, um, this one I can go  to my larger desktop view, go to selector, go to H one  And make it a font color, something slightly different. Uh, blue. Let's go to font size and let's make it massive. Let's go it up to 60. Okay, enter. Now I've got my three different media queries, okay?

And they only get activated by how wide your page is. So let's go out and preview it in a browser. It's gonna ask me to save. Yes, please. You can see here desktop view, Table view,  and ugh, I can't get small enough to show you mobile view,  but know that if my browser got a little smaller,  okay, can I get any smaller? No, can't get any smaller.

Um, it was switched to red. Alright. Hopefully that gives you a bit of a indication  of the two separate areas, um, to deal  with when you're dealing with mid queries. One is gets, it triggers the width of the box. And we did that with the SM excess, md, lg,  okay, the different sizes. And then there's a separate one here where we are dealing  with, um, the style of things like the fonts.

You can change the height of boxes,  um, whatever you want in them. As long as they're contained in these curly braces to do  with this media query, they'll get activated at this time. Alright, let's move on to the next video.