Important Keyword in CSS Explained | Frontend Bootcamp Hindi | Ep.12

Summary

In this educational video, the presenter explores CSS specificity and the cascade, focusing on how styles are applied when there are conflicts. They explain that inline styles have a higher specificity of 1000, surpassing IDs, and demonstrate how the '!important' rule can override all other styles, including inline styles. The video serves as a warning about the potential pitfalls of using '!important' and inline styles, emphasizing the importance of understanding CSS specificity to avoid overwriting styles unintentionally.

Takeaways

• 😀 Cascade and specificity are crucial in determining which styles are applied when there are conflicting styles.
• 🔍 The specificity hierarchy is ID (highest), class, and then element selector.
• 📈 To increase specificity, you can duplicate the class or ID selectors.
• 🚀 Inline styles have a specificity of 1000, which is higher than any other selector, making them difficult to override with CSS alone.
• 💥 The '!important' rule in CSS has infinite specificity and should be used sparingly as it can override all other styles.
• 🛠️ To override inline styles, you must use the '!important' rule, as no other selector can override them.
• 🔑 The '!important' rule can only be overridden by another '!important' rule with higher specificity or by changing the inline style itself.
• 📝 Understanding the cascade rule is essential for predicting which styles will be applied and which will take precedence.
• 🔄 When specificity is equal, the last style defined in the CSS will be applied due to the cascade rule.
• ⚠️ Overusing '!important' can lead to maintenance issues and should be avoided unless absolutely necessary.

Q & A

What determines which style will be applied in case of conflicting styles in CSS?

Cascade and Specificity determine which style will be applied in conflicting styles. ID has the highest specificity, followed by class, and then element selector.

How can you increase the specificity of a selector in CSS?

You can increase the specificity of a selector by using multiple classes or an ID, which adds to the specificity value.

What two things have more specificity than an ID in CSS?

Inline styles have a specificity of 1000, and the '!important' rule has infinite specificity, which can override any other selector.

Why is it difficult to change a style set by inline styles in CSS?

Changing a style set by inline styles is difficult because inline styles have a high specificity of 1000, which is higher than any other selector except for '!important'.

What is the specificity value of an inline style in CSS?

The specificity value of an inline style in CSS is 1000, which is higher than any other selector except for the '!important' rule.

How does the '!important' rule work in CSS?

The '!important' rule in CSS overrides all other styles, regardless of specificity or the cascade order, making it a powerful tool to force a style to be applied.

What is the recommended practice regarding the use of '!important' in CSS?

It is recommended to avoid using '!important' in CSS due to its potential to disrupt the natural cascade and make future maintenance difficult.

How can you overwrite an '!important' rule in CSS?

To overwrite an '!important' rule, you must use another '!important' rule with higher specificity or place the new '!important' rule after the existing one in the cascade.

What is the significance of the cascade rule in CSS?

The cascade rule in CSS determines the order in which styles are applied when there are no specificity conflicts. Styles defined later have a higher priority.

Why should inline styles be avoided in CSS?

Inline styles should be avoided because they have a high specificity that makes them hard to override with external CSS, leading to less maintainable code.

Outlines

00:00

🎨 Understanding CSS Specificity and Overriding Styles

The paragraph introduces the concepts of CSS specificity and inheritance, explaining how they interact to determine which styles are applied when there are conflicting styles. It highlights the hierarchy of specificity, with ID selectors having the highest specificity, followed by class selectors, and then element selectors. The video also explores how to increase specificity by using multiple classes or IDs. The speaker then transitions to discussing two types of selectors with even higher specificity than IDs: inline styles, which have a specificity of 1000, and the '!important' rule, which has infinite specificity and overrides all other styles regardless of their specificity.

05:02

🌟 Inline Styles and Their High Specificity

This section delves into inline styles, which are styles written directly within an HTML element's 'style' attribute. It explains that inline styles have a specificity of 1000, which is higher than any other selector type, including IDs. The speaker demonstrates how inline styles override other CSS rules and discusses the difficulty of overriding them with standard CSS. The use of the '!important' rule is introduced as a method to override inline styles, but it is cautioned that this practice should be used sparingly due to its potential to disrupt the natural cascading and specificity rules of CSS.

10:04

⚠️ The Power and Danger of the '!important' Rule

The paragraph discusses the '!important' rule in CSS, which has infinite specificity and can override any other style declarations, including inline styles. The speaker illustrates how to use '!important' to force a style to take precedence over all others. However, it is emphasized that '!important' should be used with great caution as it can make future style changes difficult and can lead to a maintenance nightmare. The paragraph also touches on the cascade rule and how it works in conjunction with specificity to determine which styles are applied last when there are conflicts.

15:08

🔄 Overwriting '!important' and Best Practices

The final paragraph addresses the challenge of overriding styles that have been declared with '!important'. It explains that the only way to override '!important' is by using a higher specificity or by using '!important' itself with a higher specificity selector. The speaker warns against the overuse of '!important' and suggests that it should be reserved for situations where there is no other option, such as when styles are being overridden by inline styles. The paragraph concludes with a summary of the key points: understanding how to overwrite styles, the pitfalls of using inline styles and '!important', and the importance of maintaining a clean and manageable CSS codebase.

Keywords

💡Cascade

Cascade refers to the set of rules that determine which style declarations are applied to an element when more than one declaration targets the same element. In the video, the concept is introduced as a key factor in deciding which style will be applied in cases of conflicting styles. It is mentioned that the cascade rule works together with specificity to determine which styles are applied to an HTML element.

💡Specificity

Specificity is a measure of how specific a CSS selector is, which affects the order in which styles are applied when there are conflicts. The video explains that specificity is calculated based on the number of ID, class, and element selectors used, with IDs having the highest specificity, followed by classes, and then element selectors. The script provides examples of how to increase specificity by duplicating a class or ID selector.

💡Inheritance

Inheritance in CSS refers to the mechanism by which properties applied to a parent element are also applied to its child elements. The video script mentions inheritance as a concept that was discussed in a previous video, where the styles applied to an element can pass down to its children, affecting how they are displayed.

💡Inline Style

Inline styles are CSS rules that are written directly within the HTML element as a style attribute. The video script explains that inline styles have a specificity value of 1000, which is higher than any ID, class, or element selector. This means that inline styles will override other styles unless the '!important' rule is used.

💡!important

The '!important' rule in CSS is used to give a style declaration higher priority, ensuring it is applied even if it has lower specificity. The video script warns against the overuse of '!important' as it can make stylesheets difficult to maintain and debug. It is mentioned that '!important' can override inline styles, but it should be used sparingly.

💡Overriding

Overriding in CSS is the process of applying a new style rule that takes precedence over an existing one. The video script discusses various methods of overriding, including using higher specificity selectors and the '!important' rule. It provides examples of how to override styles using different selectors and the implications of doing so.

💡CSS Selectors

CSS selectors are patterns used to select the elements you want to style. The video script explains that the specificity of a selector is determined by the combination of element type, class, ID, and other selectors. It mentions that element selectors have a lower specificity compared to class and ID selectors.

💡Live Server

Live Server is a development server with live reload feature for static & dynamic pages. The video script mentions opening an HTML file with the live server to see the styles applied in real-time, which is a common practice in web development for testing and debugging.

💡VS Code

VS Code, or Visual Studio Code, is a popular source code editor that supports a variety of programming languages. The video script refers to VS Code as the environment where the HTML, CSS, and JavaScript files are opened and edited.

💡Element Style

Element style, as mentioned in the video script, is another term for inline styles. It is the style that is applied directly to an HTML element and has a high specificity value of 1000. The script explains that element styles are difficult to override and should be avoided in most cases.

💡HTML Element

An HTML element is a component of an HTML object, consisting of a start tag, content, and an end tag. The video script uses HTML elements as examples when discussing how styles are applied and overridden. It shows how different styles interact with elements and how specificity and the cascade affect the final appearance of these elements.

Highlights

Cascade and Specificity determine which style is applied in conflicting styles.

ID has the highest specificity, followed by class, then element selector.

To increase specificity, duplicate the class or ID selector.

Two things have more specificity than ID: one is 1000, the other has infinite specificity.

Inline styles have a specificity of 1000, which is higher than ID.

Inline styles are difficult to override with CSS, making them less preferable.

The '!important' rule in CSS can override any other style, including inline styles.

Using '!important' should be rare due to its potential to disrupt CSS management.

The cascade rule states that the last style defined is applied if there are no specificity conflicts.

To overwrite '!important', use a higher specificity or place the style at a later point in the CSS.

The '!important' rule can only be overridden by another '!important' with higher specificity or cascade placement.

Overwriting inline styles requires '!important' as they have a high specificity of 1000.

Avoid using inline styles and '!important' to maintain manageable and predictable CSS.

Understanding specificity and the cascade rule is crucial for effective CSS management.

The video demonstrates practical examples of specificity and the cascade in action.

The '!important' keyword is a powerful tool but should be used judiciously.

Transcripts

Hi everyone, in

the last video,

we understood Cascade,

Specificity and Inheritance.

Cascade and

Specificity decides

which style

will be

applied in

our conflicting

styles.

We saw that ID

has the most specificity.

Then comes class and

then comes element selector.

We also saw that if we

want to increase someone's specificity,

then how can we do that?

If we copy that class

or ID again and again,

then its specificity increases.

In this video, we

will discuss two things,

which have more specificity than ID.

One of them is 1000,

and the other has infinite specificity.

It doesn't care about specificity.

It applies on its own.

Whatever you do, it will apply.

Let's see what it is.

For that, we will go

to our old project.

Where did it go?

Here it is.

So, I will duplicate this old project.

I will give it a name.

03 underscore

Overriding

Specificity

Overriding Specificity

It is very difficult to say this.

I will say specificity again and again.

It has opened in our VS Code.

In the last video,

we wrote some styles

to understand specificity.

I will uncomment this.

It was written to understand inheritance.

I will comment this.

Here is our HTML.

I have to right

click and open

with live server.

We have opened with live server.

According to what we saw

in the last video,

we were styling this element.

While styling this, we were understanding

how specificity and cascade are working.

Here, our deep

pink style was

being applied.

Let's close this.

I will keep index.html file first.

Then I will keep CSS.

Then I will keep JavaScript.

Whatever you prefer, it doesn't matter.

I have kept it as it is.

According to the cascade rule,

when there is a comparison in this,

this will be applied.

But it will overwrite the class ID.

It will overwrite the class ID.

Because these two are on equal level,

their specificity is equal,

the one below is being applied.

Cascade rule is being followed.

Cascade rule and specificity both work together.

I want to use

this ID and change

the deep pink color.

I don't want to

use the class ID.

If I want to

change the class ID,

give me the class ID below.

Then it will overwrite the background color.

This is white.

So, this.

So, it overwrote the class ID.

Because it has the same specificity.

This has 100.

This has 100.

So, close this.

Remove this.

We will see how to overwrite.

We have used this a lot

earlier when we were learning HTML.

Inline styles.

So, how do we give?

Style is equal to background color.

Give green here.

So, I gave the background color green.

Now look at this.

Its specificity is more than that.

Its specificity is more than ID.

That's why this is being applied.

If we click on this.

So, look at this.

And it is coming in this section.

Our CSS file name is not coming here.

Because it is not coming from CSS.

It is coming directly from HTML.

And here it is written as element style.

So, element style means inline style.

We saw in the

first video of CSS.

When we write inline style,

it comes in this section.

Whatever we write here,

it will come in this category.

So, this is inline style.

So, element style is written here.

So, element style is

what we give directly

inside the element.

So, its specificity is more than ID.

How much is it?

Can we hover and see?

No, we can't.

If you hover here, it

is showing something else.

If you hover here, it is showing something else.

So, whatever specificity it shows,

it shows only inside the CSS file.

So, if we want

to know its specificity,

how will we know?

Search on Google.

Specificity of inline style.

So, see this.

Inline styles get specificity value of 1000.

So, its specificity is 1000.

If we come to

this result of W3schools,

So, see this.

It has 1,

which is tag element selector.

We have also seen by combining.

If you combine tag and class,

then class will have 10

and tag will have 1.

So, 10 and 1 will become 11.

If you combine ID and

this, it will become 101.

And see this, inline style.

The color is given here in pink.

It is given inside p tag.

So, its specificity becomes 1000.

So, the specificity

of inline style

is very high.

That's why we don't use inline style.

Because if someone gives inline style once,

then it is not

impossible to change it

by using CSS.

We will see that next.

We will see that next.

We can do, but we

should not use it.

So, it is very difficult.

Normally, if we use ID,

then it overwrites.

Normally, if we use ID,

and someone has given

inline style inside element,

then inline style overwrites everything in CSS.

Except one thing.

That is a very dangerous thing.

It should never be used.

But sometimes you may need it.

So, let's see.

Now, in all of these,

in all of these,

the least specificity,

and according to Cascade rule,

the least importance is this one.

This green one.

If we come here and see,

I have given green here as well.

I have given green here as well.

Let me give it some other color

so that there is no confusion with that green.

Let's give this color.

The element style has the highest specificity.

It is 1000.

That is why it is here.

It is at the top.

The least specificity

is of this

deep pink one.

Deep pink ID selector

is of this one.

The least importance is of this one.

So, look at this.

The least importance,

if I uncheck this as well,

If I uncheck this,

this applies.

If I uncheck this,

this applies.

If I uncheck this,

this applies.

So, look, our alloy,

the one we used earlier,

that one is coming last.

It is coming here.

When you remove all of them,

then this alloy will come.

According to Cascade rule,

the least importance is this green one.

According to specificity,

it has the least importance.

It has the least specificity.

But now,

I will tell you one thing,

by using which you will overwrite everything.

Element style, ID, whatever it is,

everything will be overwritten.

So, that is

important.

Exclamation mark and then important.

You will write this much.

Now, look, everything is green.

Everything's color is green.

So, if you come here and see,

the specificity is very less.

That is why it is coming down.

If I reload this,

it has crossed out the element style.

It had 1000 specificity.

It has also crossed out the ID,

the class,

and all the alloys.

It is down.

It is down because the specificity is less.

But it is being applied on everyone.

It has overwritten everyone.

So, this important thing

is very dangerous.

You have to use this very rarely.

If you give this once,

then you will lose

your life in overwriting.

You won't be able to do it.

It is very difficult.

So, you must be thinking,

what is the specificity of this?

There is no specificity of this.

It just gets applied.

If you look here,

there is only one specificity.

The specificity of the alloy

is of a selector.

And this is not a selector.

You have told in that style,

in that property,

that this property is important.

You have to apply this.

It doesn't matter,

whatever it is.

So, this has become the most important.

Now, its specificity is very less.

It is one, but it is being applied.

According to the cascade rule,

if I place it at the top,

then it means that

its importance

according to the cascade rule

will be very less.

But, it is still being applied.

Look here.

It is still being applied.

It is at the bottom.

In style, it is at the top,

but according to the cascade rule,

it is at the bottom.

But, I have told the importance here.

So, it will be done.

Now, I want

to overwrite this importance.

So, how will we do it?

It is very difficult.

Now,

we will overwrite the importance.

So how will you do it?

Take this and put it down

and then give it

some other color, let's

give it brown

We have given the color of

the text as well as brown,

so it is not visible

Let's give some other text

Let's give this

cornflower blue

So I have given this blue color

Now see, it is overwriting

Because these two are important, they

are fighting with each other

So now according to the cascade rule, it

is coming down, so it is being applied

So the important can

only cut the important

Like iron cuts

iron, it is

cutting the important

So if you look here

See here, the cascade rule is following

This one is coming down, because this

was our style, it was applied

Then this is being applied

Now the important is in both

So this important cut this important

There is no other

way to overwrite

the important, nothing

Until you write the important

Using a cascade rule

or increasing the specificity

You have to overwrite it

Now you want to overwrite this

You have to overwrite this, but you have

to write your style at the top

You have to write it at the top

So you cannot do like this

If you want, you can copy this

And don't give

it a green

color, give

something else

Dark olive green

So you cannot

overwrite by writing

at the top

Until and unless you increase the specificity

How to increase the specificity?

See, here you write html

So its normal specificity is 1

Here the class is also

added, so it is 11

One for this, one for

this, so it is 11

Now it will overwrite, it

will become olive green

Dark olive green has come here

Because its specificity is more

It will apply according

to the cascade rule

But then it

will overwrite because

its importance

is more

I will not say, I have said a lot

I get mad while saying it

Its importance is more

So see here

It will come above it,

where did it go?

This is olive green

See this

Its specificity is 10

I will say importance

Don't say specificity

I don't want to say it

Its importance is less,

its 10, its

10, its 1

Its 10, its 10, its 11

That's why it is coming

above in our style

So this is being applied

So like this we

can overwrite the importance

But we can only

overwrite using the importance

We don't have to use it

Until and unless

Suppose you go

to codebase and

someone else has

already used

the importance

And you have to overwrite it

Then in that case you will

need to use the importance

Normally we don't use it

Our specificity and cascade rule gets destroyed

These were the two topics

I wanted to tell you

How we can overwrite the id

Important keyword is also very important

Normally we don't use it

But you will see it

and it will kill you

If you don't know what it is

You will do anything, whatever you

give, it will not apply

So I hope you understood

You must have understood how to overwrite

Don't use inline style

Don't use importance

You should know that its

specificity is the most

If you have given an inline style

Then you will have to

use importance to overwrite it

You can either change the inline style

If you can't change the html

Then you can overwrite

the inline with importance

You can't overwrite the

inline with any id,

class or element selector

If you want to overwrite the inline

Then you will have to use importance

So that's it for this video

See you in the next video

Bye Bye