 Hi there my friend and friends. I hope a lot of people with their CSS and one thing that I used to not see very often actually, but I see a lot of now is using the universal selector like we can see right here, where we're basically applying kind of stuff on there that we really shouldn't be. So if you are doing stuff like that, then this video is for you. And just before we dive in, if you're new here, my name is Kevin and here at my channel I help people fall in love with CSS. I can't get them to fall in love with it. I'm hoping to at least help them be a little bit less frustrated by it and declaring a ton of different properties on the universal selector. The little star selector like we just saw is one of those things that can seem innocent enough at the beginning, but it actually leads to a whole bunch of problems and a whole bunch of headaches that I don't want you to have. So let's dive into the code and see what the problem with it is and we'll start by looking at what the problem is and then we'll look at sort of how we can approach things. In case this is how you are doing things. And you can see right now I've set a color and a background on here and everything looks fine. My color and background are there. The issue could come up first of all if I add a background to something else. So I have this hero right there you can see that's at the top. We want to look at the HTML really fast. I just have a section with a hero that has the gradient background, but we can't see it. And this is an extreme example for sure. But you can see that my color is a star selector. So even this div here is getting it, the h1 is getting it, the paragraph is getting it. All of these different elements are getting it. And so we can't see the background completely at least on this section here with the hero class. So we're going to jump back here really fast and just for fun just to show you if you didn't know you can actually get transparency through the hex codes. I don't really like doing this because it's hard to read but it makes it really fast update there. And you can see we have the transparency coming and this is sort of the color and then we have all these layers and you can see all of these things are getting that background color. So you can even see the layers of stuff being built up over here and things here and everything. So, you know, setting the background color we don't really want to do that. So what would be the better solution? Well, that's usually when we use either the HTML or the body selector to put our background there instead. And even if I didn't have a lot of content, it would actually stretch the entire size like that and everything is good just because of the way the background actually propagates to the viewport. We're not going to worry about that. It's complicated for nothing. But you can see that it's working and everything is fine and that sort of becomes my default background color. And then of course we can override it just like I overwrote it right here where we have the hero having a different background color. So everything is completely fine. And that's also for the color of the text itself. Setting color on the star selector here is a nightmare because let's say this hero instead of having that for some reason we went with a light pink background on there. And we'll scroll back over hit save. And I can't really read what that is. So normally I should be able to say here the color is a dark color and I can hit save to three. There we go. We needed enough numbers, but it doesn't actually change. And that's because if I had text directly in that hero, it would actually change. So if I put some text here, then the color of it, you can see it up there is actually is black now that I've deselected it. And so that's working perfectly fine. But everything else, including if I put text in my wrapper here, that's also coming up as white because text is an inherited property. So basically when I do this, that means here, like anything that's in my hero will get the dark background, but then this is an element. It's being selected by my universal selector. And so it is becoming white. And this is an element and this is an element. And when we do things like this, it means we can't rely on inheritance. And one of the best things with CSS when it comes to typography is relying on inheritance. So once again, I could take the color off of the universal selector, bring it down here. And now it actually works. And so for most of my site, we have a black or very dark background and then this light inherited color on the text that's coming through. But here in this hero area, I don't have that because I've changed it. So anything inside of the hero will inherit this darker color that we can see right here. Now, I think one of the reasons that people do love having the star selector is they don't fully understand the fundamentals of CSS and these ideas of inheritance and these ideas of the way the cascade works and all of that. And it's a really important concept with CSS of not declaring things where you don't really want them to be so we can rely on how it fundamentally works. And that's one of the reasons why we often see box sizing border box thrown up here on the star or often star and then the star before star after. And so we'll see that because this is something we often want to change the behavior of away from the default defaults a little funky because it's the way it works. It's just an easier thing to do. But this isn't an inherited property. So if I don't want to have to declare it over and over and over again in the different places where I might be having a width and a height. This is sort of just a really easy way to get around that another common thing that you see on the star selector are things like margin of zero and padding of zero. This is a little bit heavier handed because then you have to add margin and padding back in depends on how you want to approach things. If you don't mind that then you can go for it. But again, these are not properties that are inherited. So if we want to be able to apply them on everything we have to do it on the star selector where things like background colors like we just saw that's dangerous. Another one that I see often is overflow and overflow and you'll get an overflow of hidden or people putting in overflow even of auto and that actually look. I mean, first of all, that's really awkward. I don't even know why that's happening. It's behind and I think it's behind my head. So I'll just move that. I got a little scroll bar right here, which is super, super awkward. And I honestly, I'm not sure why that's showing up, but it doesn't matter because it's super weird. But you'll even notice when I do that it changes the behavior of the background around this element to because of the way collapsing margins work when it comes to overflow. And so like that's really strange, right? That things like that can get like mucked up and like this just causes all sorts of things or it might even an overflow hidden. And while we don't have the scroll bar issue going on up there anymore, it's still a really awkward thing that can happen. This does still impact the collapsing margins like we saw. Maybe that's a good thing in a sense, but overflow hidden on everything. There are times where that could actually get you into trouble. You might not realize it, but you'll run into times where you're confused about why something's going on. And it's because this is set here. I just generally wouldn't recommend it. If you need an overflow hidden on something, put it on that one element that you actually need it on and don't declare things in your CSS before you actually know you need them. Just throwing a whole bunch of stuff in here, including like your font family, all these other things, apply them where you need them. And you're probably going to get a much better result where you have a lot less fighting going on a lot less issues overall within your CSS. Now, another thing I also seeing here are things dealing with viewport units like width and all that or even on the body like a width 100 viewport width and stuff like that. And viewport units early on can seem like a really just this perfect fix for I just need 100 viewport width on there. But they're actually not the best unit to use at all. So don't declare things on your universal selector if you don't need them. And if you want to know the issues with viewport units and how to overcome those, I have covered those in another video that is right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome Michael, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.