Hello, and welcome to a new SC SS Crash Course video. In this Crash Course video, we're gonna be looking at grouping and nesting. So why is grouping and nesting? For starters, when we have applied some styling in our CSS file or in some style type, for example, we've always done it in sort of a linear fashion, we've always done let's say, we're starting here. And like Dave here, we stand here. And we looked at classes and ideas in the previous video.

So we would do something like hash, unique, whatever it is called ignore the name mentioned, blah, blah, blah, is quite linear. But you might have, let's say, three different classes or three different IDs or classes and IDs or elements that you want to apply the same style into. But they have different names. And they might have different names because perhaps they have their own unique styling as well which you can just do that and I'll show you In a second, and maybe they have left a unique ID, because you want to refer to the more classes later on in some sort of dynamic language like JavaScript, or some framework like jQuery or in some sort of back end framework using some sort of form system like PHP. So what we're going to do is create a few divs on our front end HTML page. I'm going to do div id equals Hello.

And now in here, we're going to put the text off. Hello, one. Let's just duplicate this duplicate again and duplicate it again. And for this we're going to put hello to rename this. legality lovely Yes, hello, please. Hello free chandi texting, so And you know what, I'm just gonna delete this for now, we'll need different nesting.

But we'll just leave that the way for now reporting over time proper retirement say, no CSS, save that refresh. And this is the result we get Hello, hello, one, hello, one and two Hello free. And then no CSS under the load gap because p tags already have their own styling applied to them. So in the index dot CSS file, I'm going to put hash Hello. And in here, we're going to change the font size. So font size Cola, number four for em.

I'm going to duplicate this duplicate duplicate for hello to a free save that refresh. And as you can see, all of these divs have the same font size, but we're repeating code a way to alleviate this problem is get rid of that hash. You want to put comma, first, you want to make sure you put that that's the way you distinguish between different ideas. Because if you don't this actually mean something different. And we'll be covering that in a later video. So don't worry, we won't be missing that, right?

We just does mean something different table, comma, hash, hello to comma hash. Hello, three, save that. I don't even see the result is unchanged, which is fantastic. And you only want to do this sort of grouping. If you know that, let's say all of the DS, or IDs or classes or elements or whatever they are, are going to have the same font or maybe you want them to all have the same font size and if one change, you wanted them all to change, so if you wanted to keep consistency throughout your websites, that's one example. So that's a way of doing it and then like we'll say, what you could do maybe I wanted hello to to have the color of yellow, you could do by just doing hash hello to like so, or refresh, it's got the color of yellow.

They've all got the font size for em, but only hello to has a color of yellow. What we're going to do is just do P and then put some text dashed decoration. We're going to put a line through, save that refresh. And you might think, why have we done that? The reason is, we're going to be getting on to nesting that. So let's go onto here.

Let's do div. for last. This could be an ID, it could be a class however you want, or you could refer to the actual element itself. That's usually the case in CSS. We can do an ID for the class for the one element, whatever. It's all interchangeable.

Just major IBC PR dot for class hash for ID and Put nothing for the actual element name itself for parent says that. So here I'm gonna put p, I'm going to put nested inside here. So save that refresh. So as you can see, this is nested inside of this div tag. And this p tag has also had this text decoration line through applied to it. But maybe I want all of the P tags within a div that has the class of parent to have the font color red, and they have a mouthful.

And this will be very common D source scenarios when you're doing web development. So your left to make sure you get rid of it, but it's not as hard as you think. So first of all, you want to put the parent name and parent name in this particular element here. So we're going to refer to the actual class itself, but you could refer to it as Dave, if you Want you to so I'm just gonna put doc parent in a space don't want to pro con that then he put people remember like I was saying comma and no state a comma and space they both mean something different the parent space p and n in here you put color red, save that what that means is every p tag within a tag that has a class of dot parent, apply the color red to it, refresh, and as you can see, this has the color red applied to it.

But this particular pizza, which was a nested within a element that had the class parent did not have the color applied to it. So that's it for grouping and nesting. If you have any questions, feel free to post them on my education platform sonar learning.co.uk. If you liked the video, please give it a thumbs up or you know, just us usual things, let me know that will be fantastic. There will be a link to all the source code from the series so feel free to check that out. And as usual, thanks for watching and I hope you have a great day.