 Hello everyone, this is Christian. So there's a question about Mobile First, and it's a great topic that most of you posted on discussion. So I want to just do a short video to show you how to load CSS or style sheets to your web page based on needs, meaning based on certain breakpoints. So you can kind of see it live and see how that works. So here is an example of that. So here we have two style sheets. I call it the red and the blue. I just put the star. It's a wild card that applies to the entire web page. So when I load it to the HTML, you know, but again, the one that takes precedent is the one that's closer to the content, so in this case, red. You see that when I load the regular style sheet this way on the browser, if I go to the elements under the styles here, you'll see both the red and the blue are loaded here. So the blue is crossed out because the red takes over, okay? So it doesn't matter what size. I use here. And the size you can see up here on the top right is the look at just the Y axis, okay? Well, the X axis, actually the width. So it takes over in that case. So that means that whether the blue is used or not, it's still get loaded. And if imagine your style sheets have like hundreds or thousands of lines in there, some of those may not be needed at all because you do not take care of that, it's gonna get loaded and it'll be used to calculate the render to the browser anyway. So sometimes if you have a lot of CSS stuff there, maybe some of those don't really need to be loaded, okay? Because if you have a lot of them, they can actually cause some performance issues. So we learned that you can actually, you know, set a certain breakpoint to your devices. Now we're looking at, you know, mobile devices, different screens, and so you can go down here and let me go ahead and turn this red off and I'll use, let's say I want to design using two different devices, okay? Different screen size. And based on the screen size, it will load the red or the blue, okay? So the blue, though that the red means I have a minimum width of 600 pixels. So that means that as long as the screen size is greater than 600 pixels, the red will apply. And the blue will not apply until the minimum width is, you know, greater than 800. But because 800 is actually greater than 600, that means the red will still apply, right? So if you look over here right now, we're at, okay, we're at about 740, okay? 740 because we did not reach the blue yet. The red is already been reached. So therefore you see the red only applies. What this means is that even though I loaded two style sheets here, okay? The blue is not actually being used at all so that it was not being rendered to your browser. So all the content inside, all the code inside this block will not be rendered. So it saves you, you know, extra CPU time, right? Until I stretch this out, if I reach over to 800, you see that blue comes back on. Even though, you know, the blue is not being used, it gets turned on because why the rules here still apply, right? So the blue is the red takes president because it's loaded first. So therefore now the blue is turned on but the red is still on. Why? Well, because, you know, 800 is actually it meets this criteria. So how do you prevent that from happening? I want to load on the red when, you know, a certain time. If you want to keep it so that every time certain, you know, things will load at the 600 pixel, you put it here. Maybe a certain times you want to do something like, you know what, when I reach, so the red only this gets displayed or render between 600 and let's say, you know, 800. So that's what you put here at the end. At the end, I'm going to put here at the max width now, it's at eight, I'll put 799, okay? So the 800 is the break point for the other one. So as long as between, you know, 699 only the red will run and they want to reach 800, the red gets turned off. You can see over here now because we already over the 800 mark. Okay, okay, it's connected. I don't want to connect that one. Okay, I want to just do the screen. Okay, so here is at 810, okay? Because 810 supersedes the 799, the red is turned off. But if I go below that, right? So you see now the red gets turned on but the blue is now turned off because the minimum is 800 and we're now below 800. Okay, so then you do the same thing for the blue. If the blue reaches a certain width, you know, let's say 1200, then that gets turned on and so forth. And this is how you load CSS based on needs based on different screen sizes. Okay, you can do here and the CSS, like I just showed you here, sometimes, you know, you want to do on the link tag as opposed to what you see here. Or you can do both, but you have to be kind of careful because get a little bit confusing. So let's say that I'm gonna go back to what I had before, I'm gonna turn this off, okay? Assume that the blue will get turned on when between 800 and 1200, the red gets turned on only six and 800, okay? So up here on the style sheet, we load the style sheet. Go back to the school room before, right? So I want to load the blue. You put here the media tag and you put here the minimum width. I want to load the blue only when I reached 800. Let's call it 801, okay? 801, PX, and I want to turn it off when I have the max width at 1200. So only runs when you reach that width. So now you can see that the blue is now turned off until I reached the 800 pixel minimum. If you go on the rice, you see that now it gets to 800 and boom, there it is, blue comes on, okay? If I go above that until 1200, then the blue will actually go away right about now. Here we go, right? You can see I load only the one that I need, okay? So that is how you would tackle this problem. So in a way, it's like a feature we usually come and call lazy loading in JavaScript. Right, so this one, let's say I put here 600, 600 to 800. So I load to this, so now the order here is not, it doesn't matter anymore in this case, if I'm loading this way, because the numbers here will get calculated based on the screen size. So right now, because I'm below 600, I mean below 800 and 600, the red gets loaded, right? Okay, because I auto range back to default. If I go above 800, the red is now disappeared. As you can see down here, it's gone. The blue, it's loaded and then until I move up to 100 and then the blue goes away. So again, the order is not important anymore. If I swap the two, you can see here, okay? You can see that it doesn't matter, right? Because it's based on the screen size now. So yeah, I hope that helps. You can understand how you can load certain CSS to your page based on the screen size. It's important you put a range. If you don't want to put a range here, that means sometimes, let's say, as long as it's more than 600, I want to apply this rule to some rules to the page. But there's also times that when a certain range, certain maximum width, you only apply certain things. So in that case, it's not really that useful doing this case. So in this situation, you have to go down here and add more midi queries just to block off a certain tags or a certain feature and only apply to that certain condition, okay? So I hope this helps. And a great question, great poll, so keep those coming. And I look forward to reading more of your discussions. Thank you so much, bye.