Important Rule in CSS

Hello guys! Welcome to our series, CSS.

In our last segment we had covered nth-child selector, first-child and along with that last-child selector.

Guys in the last segment, whichever practical we had performed, I request you practice and try it.

During the practice or the segment if there is anything that you are not understanding or any question is arising. You can tell them to us on forum.learnvern.com.

 We would try to revert to your queries at the earliest.

 We will start our today’s segment.

Out today’s segment is on CSS Important properties.

Usually when we talk about important, with the key word we get to know that, we want to give more importance to a value or a property.

Like it is written over here, this property in CSS is used to give more importance compared to normal property.

It means, we want that any particular property should be executed with more importance compared to the other properties that have been applied.

So, whenever we want to perform such thing when one property is more important. So, we say that adding important keywords.

The important means ‘this is important’.

This rule provides a way of making the Cascade in CSS.

When we add Important key word at that time like it is given here with one exclamation sign and then the keyword, we add it in this way.

If a rule is defined with this attribute, it will reject the normal concern in which the later used rule overrides the previous ones.

Means, in our entire style.css or the entire CSS file that is there.

 In that file if anywhere exclamatory important, if such attribute is used.

So, before and after this, if the same attribute is faces, then its execution is overridden with this value.

We will perform it with example, that is when it will be clearer to us.

 If we use more than one declaration marked important, then the normal cascade takes it over again.

That means the new marked important will replace the previous one.

It means, If in one style.css, we have used important  twice, then the second one will be executed.

So, we get 2 points. 1^st is that when we use different properties but use importance in one property and not in another.

And another scenario is when we use importance in both.

 Now we will perform both these things with practicality.

So, let’s say here one example has been given.

This is our Syntax as well to use Important.

 Importantly, we take the element's name.

Then here the property name and then the value that is there.

So, whichever value that is there, next to it we add an important key word with an exclamatory sign.

By doing this our value proves to be very important.

Let’s take the example.

I will open Sublime text here.

HTML, “Example of Important”, save. This is our program, important.html.

Let’s say that we take a division in body tag and in division we will add a class, “class-important”.

And in this we are taking a h1 tag “This is a heading”.

Save, now we will run this.

This is our program.

When we are running this, at that time we can see here that “This is a heading”.

 In this we have currently not given any color to the heading.

So, let’s say I add in the style one heading h1 and inside h1 I give, color-red. Save, reload.

So, now we are getting our red color.

Now, this same h1 property, we will define again and this time I give the color green.

Save and reload.

 So, currently what is happening is earlier I have given red and then I gave red.

If we see our program step by step, execution, as we know happened line by line.

So, I have taken the same element and given it once the color red and once the color green.

 So, what is happening here is, in the way my execution is going from top to bottom.

In that way, first my color becomes red and then green. Now when I reload.

So, later the color that comes is green.

Here you can see that 1^st is red and then green.

So, the later color that comes overrides my 1^st value.

 So, I am getting the latter value as an answer.

So, here h1 color, I am getting green.

If we do the same thing with the help of the class.          .

class h1 and then .class name and h1.

So, what did we do? Earlier we did it with elements and now the same thing we are doing with the class.

We will save and reload.

In this case as well we are getting the same result.

 Means the line and value that comes late overrides our color.

That means that green is coming later, so that will be our final color.

But in this case instead of green, I want to define red.

No matter what color, I want my heading in the red color itself.

 In that case next to red I will put important.

What will happen with important keywords? Any value that has been added to an important keyword, that will be my final value.

If I save this code and run it. So, my heading is visible in red color.

Which means even if my green color comes later.

And as per the execution rule, the color that comes later should be our color.

But still, we are getting red.

So, what do we do to get this property? We add important property.

What is important? Whichever value we add with an important keyword, that value is always passed. 

And rest of the value, if in the entire style or anywhere else, if the same value has been given or the same property has been defined with some other value.

 So, those values will not be applicable there.

 Only those values will be applicable with which important keyword has been added.

In our case, in red and green, green comes later.

So, green should ideally be there.

But since we have marked red as important, our heading will be seen in red color.

So, this use is important. Whatever is given with the important CSS.

That value will be shown with importance.

So, in our output an important value will be applicable. 

So, this is our one scenario.

If one value from two if we have given importance.

Now let’s say if I add here, h3 tag “This is heading 3”, save.

So, this is our heading 3.

 In heading 3 let’s say I do the same thing, class-important, h3.

I will give again class-important, h3. So, I have defined two class-importance, h3.

 In this I will take color and once I will give h3, orange and I give it importance.

Second time I give the color, let’s say blue.

 I think this is also important.

 Now what I have done is, to my one element, I have given the property twice.

 And both the times I have given are important.

Let’s save and run it.

Now the color value that comes is a blue one.

Because, our rule is that the execution happens line by line.

 In that case, if we have marked both the values as important.

In that case the value that will come later, our browser will consider that value.

So, here we have covered both our scenarios.

The 1st scenario is that an important property out of  2 we have passed only one element.

 Second scenario is that we have passed the important property to both.

 In the case where we have passed the value to any one of the two.

 In that case whichever is passed as important, that will be applicable for us.

And when we have passed it twice, the execution that comes later, means when our CSS is getting executed line by line, whichever execution happens later, to that our important property will be applicable.

Now there is one more scenario that comes here.

That scenario is that this CSS is internal CSS.

If the same thing happens, we pass it in line.

Like I give style to h3, color- red, important and I save it.

 So, what are we getting? Then our inline CSS that is there, that is overriding internal CSS.

That means whatever we write with the tag in the style, that important value  will be applicable more.

Let’s say I have written red here, if I remove this, save and reload.

So, which value is passing for us? The blue one.

 It means what we have given as important, that is applicable for us.

We have given importance to two but what comes last from the two, that value will be applicable.

 If we give the same importance to our inline CSS.

So, from our execution path, from that inline importance is given more importance.

So, this is the concept that we have, how is it important used and where it is used? That is very important.

 If we are giving importance to any one value from any two or four values.

So, whichever is given importance, that value will be with us.

 And that color or property will be applicable to our element.

But if we have given more than 1 important, in that case, whichever important is given later.

Means it is getting executed at the end, that value will be executed for us.

And if we have used inline CSS in place of internal CSS with important property, so always inline CSS property will be applicable.

So, this was important.

We will go into the slide.

Even here we have taken the same example.

In h1 we have taken red color and, in the border, also red color is taken but it is passed as important.

In this case what will happen.

What we have passed as important, only that will be applicable.

 We have taken the same color in the example.

So, what will happen? In both cases we can see red.

 But the color that is there is important, that will be executed here.

So, guys, this was our session on important keywords.

If you perform practically at home and at that time if you come to any new scenario.

 If there is a certain thing that you are not able to understand.

You can tell us on forums.learnvern.com.

We will investigate that and try to revert to you.

Next is an important topic on Specificity of CSS.

Thank you.