0:00
Yo guys,robbinger Beginners Lesson 13, and we're going to talk about the important declaration
0:14
All right then, so we're here back in the HTML file and I've ripped out all the styles we've used so far, so we've got a blank canvas again
0:21
So what is the important declaration? Well, essentially it's a tool we use within CSS conflicts to make a property important
0:32
And by that it means that nothing else can override it. Even if you have a conflict within a rule that's more specific, if you've got this important
0:41
declaration within your original rule, it can't be overridden. Okay? So the best way to show you how this works is by using an example
0:48
So we're going to go after these P tags again. And I'm going to do a couple of rules
0:52
The first one I'm going to do is just a simple. P selector and I'm gonna say yo color these all red and then under this I'm gonna do
1:00
another selector within the main idea main content P tags I'm gonna say color these
1:07
green all right so by now you should know what's gonna happen okay in both
1:13
counts this one's gonna win and by both counts I mean firstly it's more specific
1:18
and secondly it lower down in the cascade so it gonna overwrite this one anyway okay so we should see these p tags here being green this one will still be red but these green but let just save this and view it in a browser just to
1:32
make sure we'll open this in google chrome and yeah there we go there's the the p tags within the div with an idea of main
1:40
content and that's the one outside that dip still read so now then what if we wanted these p tags to be read no matter why
1:49
you want to say to the CSS, look, no matter what other rule tries to override this, I always want the color of P tags to be read
1:57
Now, if you're dead certain of that, you can use the important declaration
2:02
That's what it's here for. And the way we do this is by putting a space after our value read, and then we open the important declaration with an exclamation mark
2:10
That kind of says, doesn't it? Whoa, this is really important. And then we just write out important
2:15
And now that's saying to the browser, hey browser, look, right, no matter what happens
2:19
I always want these P tags to be red in colour. It's very important
2:24
That's what it's saying. So this now, even though it's more specific and it's lower down in the cascade, it's no longer going to overwrite this property
2:33
Because this property has been classified now as important. So let's have a view of that
2:38
I'll save it once again and open this up in Google Chrome. And there you go You got all your three paragraph tags all red now So that the important declaration in play Now I will say to you air on the side of caution when it comes to this important declaration
2:59
because new designers and new coders have a tendency to use it all the time when they can't
3:06
figure out what's going on with their conflicts. That's a bad thing to do
3:10
If I was you, I concentrate more on resolving conflicts naturally by that
3:14
I mean scrolling through your CSS and finding out why the conflicts are taking place and maybe
3:19
rearrange where you need to or rewrite your selectors rather than use this important declaration
3:26
And the reason being is it's not a quick fix. You might think it is
3:30
You might think, oh, I can't be bothered scrolling through all the CSS looking for these selectors
3:34
and rearranging things. You might think I can just put this important declaration on the end of this property and it's
3:39
going to work. Hallelujah. And yes, it will, but that's not what it's intending for
3:44
And imagine this, you've got a big CSS file. And throughout developing it, you've splashed this important tag around willy-neal everywhere
3:52
And you've got maybe 100 important declarations in your CSS file. Now, when you start to get more and more conflicts, it's going to get more complex
4:01
because you're no longer just taking into account the specificity, there's the word again
4:07
of the selector. But you also taking into account the important declaration and if there quite a lot of them then it going to get pretty tricky because you don know what important what not and you might be thinking well do we need to make this important Do or not Is it to do with the selector Is it to do with the important tag
4:23
And it gets really messy really quickly. It's going to be really hard for you to update in the future
4:28
So I would definitely err on the side of caution when it comes to using this important tag
4:32
me in my entire career as a front-end web developer in commercial projects I've probably needed
4:40
to use this important declaration maybe five times maximum okay and the reason I've used it is for
4:47
very very specific rules where I don't want any user agent starsheet or anything like that to
4:53
override my rule okay so the very specific ones that I know are never going to change so feel
5:01
free to use it. It's there to be used. Don't use it too often. Don't get into that habit
5:07
Anyway, Dan about covers it for the important declaration and conflicts in general. If you have
5:12
any questions, feel free to comment below. I'm going to answer all of those as soon as I can. If you like these videos, please like them, share them and subscribe. And I'll see you guys
5:21
in the next video coming very soon. You know
