Rule Order

3 minutes
Share the link to this page
Copied
  Completed
Learn about the rule order of styling in CSS.

Transcript

Hello, in this CSS Crash Course video, we're going to be looking at the rule order of toe. Now, every time we've affected some sort of CSS property, we've only really changed, you won't have it once or twice, we may have changed it twice. What I mean by that is if we set the color of a div, we haven't tried to set the color. Again, later in our code. You might be thinking, why would you ever want to do that? Why would you do that?

One of the things is, you might have a bunch of style sheet. You might be linking style sheets from, like, totally written before from frameworks, and therefore there may be code before or after the effect in the same property that you're trying to affect. You might be thinking, Okay, if I set the color to red, and then I set the color to blue, to set it to red, to be set to blue, so you try and create a mixture. It doesn't try and create a mixture. What it does is sets the Last, basically a value that is given and there's a way to override them. We're going to show you that as well.

So first of all, let's just create a div. Tag. Save that. And now what we're gonna do now let's put some text in there. So, hello, save that. I'm going to go to the index of CSS.

I'm going to uncomment this schoolboys blue background bond, very cute. I mean the text on a pretty good white black text on a blue background. What we're gonna do, we're gonna put red, save that refresh. So we've got the color red, the less affected again, this is warming so it's worth to keep again, Cola, blue. Save that. We've got this It is now a blue red has been over since I was the last value that is given to this property.

But imagine if we want to say the red is always the important one we can do exclamation mark. Word important. That's literally all you got to do, as you can see is highlighted in orange, or my Sublime Text a text editor. If I refresh, it is now read word plain is I am more important than this particular piece and styling. So I will apply the red color. That's it for the rule or that it is as simple as that with something definitely that you should know.

Because I'm sure when you're making websites, you'll probably put a bit of code you'd probably link a bunch of framework frameworks in like bootstrap. And you'd be like, why is my code not exactly working? rule order can be the cause of many, many issues. If you have any questions, feel free to post them on our education platform. So not learning Dakota, UK there'll be a link attached To this video which will take you to all the source code from the theories. If you liked the video, please let us know if you didn't please let us know as well.

And as usual, thanks for watching and this has been your CSS Crash Course video on role loader.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.