Up next in 10
CSS Tutorial For Beginners 10 - CSS Conflicts & the Cascade
1K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore CSS conflicts and the cascade, fundamental concepts in understanding how styles are applied and prioritized in web development. The video likely covers how CSS rules cascade, meaning that when multiple conflicting styles are applied to the same HTML element, the browser follows specific rules to determine which style takes precedence. Viewers can expect to learn about the importance of specificity, inheritance, and the order of CSS rules in resolving conflicts and applying styles consistently across their web pages. This tutorial serves as a crucial resource for beginners looking to grasp the intricacies of CSS conflict resolution and achieve more predictable and controlled styling outcomes in their projects.
View Video Transcript
0:00
Yo guys, what the hell is up
0:08
I'm Sean from the Net Ninja, this is CSS for beginners lesson 10, and today we're going to talk
0:13
about the cascade and CSS conflicts. So what is a conflict then
0:18
Well, the easiest way to put it is this. It's a conflict, okay
0:22
And essentially what that means is that it's when you have two selectors or two rules with
0:27
the same selector going after the same tanks. in your document and you've got properties within those two rules that are different from each other
0:34
So you might have one rule that says, go after all the spans and color them red, and then let it down the line
0:39
You might have another rule which says go after all the span tags and make the blue. That's a conflict
0:44
Right. Now, you might be sitting there thinking, what the hell is this dude on? I'm not going to make two different selectors for the same tag
0:52
You might be thinking you're going to put them all in one rule. Now, if that's your attitude, good luck, guys
0:57
Now, that's not going to happen because as your CSS gets really large, you're not going to know what's going on
1:03
You're going to be under a mountain of CSS and you're not going to remember which rules you've done all the time
1:08
And your boss wanted this changed, by the way, 10 minutes ago. So you're under pressure to change the colour of these span tags
1:15
Now, you're just going to override it. You're probably going to create your own conflict to do that
1:20
And sure, you can go back and neating it up later, but you need to understand what these conflicts are doing to your CSS, okay
1:26
and to understand that you need to understand the cascade which we're also going to talk about in this video
1:31
So best way to do that is through an example So we're gonna do just that and like I just said we'll go after the span tags why not
1:39
So these four here so we'll make a rule called span It's just the element selector open our declaration and color them all blue
1:48
Alright, now underneath I'm gonna do an identical selector just go after the span tags again and color of them or color of the more or color of the
1:55
color them all red Okay Now what do you think is going to happen here Well this is where the cascade comes in Now if I say to you the word cascade what do you think
2:07
I think of the word waterfall, or a picture of waterfall, rather
2:11
And a waterfall tumbles down from the top. It cascades downwards. Starts at the cliff or whatever, a stream at the top
2:17
comes down the cliff into the pool at the bottom. And that's exactly what the CSS cascade does
2:23
It starts at the top of the document, and it reads from top to bottom downwards
2:28
Okay, so when we have this CSS file, it comes in when it's loaded
2:32
and it reads from the top down to the bottom. So it starts here and it says, okay, I've got this span selector here
2:37
I'm going to go after all these spans and color them blue. They're right underneath it's got this other span tag
2:43
sorry, span rule, span selector, and it colors them all red. Okay, so because this is the bottom-most rule, it's applied this last
2:53
and therefore this one applies. Okay? If you're going to take one thing away from this
2:58
it's that the cascade runs from top to bottom and that if the selectors are identical
3:03
and that's important, if the selectors are identical, then the bottom-most rule always wins
3:09
Okay? So to prove that, I'm going to save this and view this in a browser
3:14
Open this in the Explorer, and then we'll do it with Google Chrome. And there they are
3:19
They're all red, which is what we expected. Okay? And again, that's because the CSS is a cascade, runs from top to bottom
3:26
It's coming in, coloring them all blue, first of all, with this selector, finding this
3:30
selector, which is identical, then overriding it and coloring them all red
3:34
Okay, now this is a prime example of a conflict, a CSS conflict
3:39
Now, in previous episodes, in previous lessons, I said that we can use embedded styling
3:44
and inline styling. And they also said that I hated it. And I do
3:48
I don't really like it, but if you want to override something, if you want to override something, if you
3:52
want to create your own conflict just on this one page okay say your boss comes up to you
3:56
says hey guys I got this I got this page here this contact page and I want the the color of these span to it I don know why I doing an American accent by the way That just what I do with a bottom of voice okay
4:08
Forgive me if that offends you, I'm sorry. Now, what are you going to do
4:13
Yeah, you could go into your syntax.c.S. file, and this is the best way to do it, by the way
4:17
and find your span rule and change it. But if you're under pressure, you could create your own conflict
4:22
You could go into the head of this page, and you could open your style tag
4:27
close it off and then do a rule here which tag it's all the span tags again and then
4:34
this time color them I forgot what color I said he wants them purple all right so
4:39
then the cascade also applies here in the HTML file it's coming in coming from
4:44
top to bottom finding this link link tag here with the star sheet applied it's
4:50
jumping into the star sheet it's going from their top to bottom again coloring them
4:54
blue then overriding them with red then it jumps back out and the bottom of the CSS file carries on down into the document it finds this style tag here
5:03
and then within that it finds the span selector which is exactly the same as these again so you've
5:09
guessed it it overrides it and colors them purple and that's the cascade in action the bottom
5:16
most rule is winning because the selectors are identical so let's save this again and open it up in a browser
5:27
And there it is, okay, we've got our span tags all purple now
5:33
So that's how it's working. It's going from top to bottom and applying the bottommost rule
5:39
Now we've also got inline styling. So we could come to one of these span tags and say your client or your boss or whoever
5:47
just you wants the top span tag coloring differently. I said we can apply a style attribute to this and we can say color green
5:56
okay so what going to happen here well again it coming from top to bottom the cascade is in action it coming from the top into the star sheet at the top of this style sheet is going to color them blue then red then it jumps out at the bottom comes down into the
6:10
star tags colors them purple goes all the way down the document then it finds
6:15
his span tag and it's saying hey what's this I've got a style attribute
6:18
applied here so I'm gonna override this span selector and color it green so I'm
6:24
doing it directly on the tag this is the bottom most rule so it's winning But then it's coming down to these span tags and these have got no style attribute so then the bottom most
6:34
Selector or rule for those is this one still up here this purple so these are still gonna be purple
6:39
Okay, now let's save this and view it in a browser one more time
6:49
And there we can see that we've got this top one here green which we styled in line and then all these ones are still from the style
6:57
tag are coloured purple. So hopefully now you understand a bit more about what the cascade is
7:04
Remember it runs from top to bottom always. And what a conflict is, it's when you've got identical
7:09
selectors. It's not only when you've got identical selectors, by the way. You could have a
7:13
selector which is more specific. For example, I could say body, span, colour blue. And then this one
7:19
because it's more specific, this one would still apply. We're not going to get into that now
7:24
but if your selectors are all identical, then the bottom most selector, which is identical, always wins
7:34
That always applies. Okay, so hopefully now you understand what conflicts are too
7:39
Like always, if you've got any questions, feel free to comment below, and I'll answer all of those
7:44
Please, please subscribe or like these videos if you enjoy them. And I'm going to see you guys in the next one
7:54
The Don't know
#Computers & Electronics