Jump to content
m.s_shohan

Why should I use !important attribute

Recommended Posts

Hi, in some code of w3schools, I found that there is !important attribute. But I didn't understand it's using. Guys, please help me to understand it. Thank you in advance. :ninja::X::boredom::umnik2::facepalm::sorry::sorry:

Share this post


Link to post
Share on other sites


<!DOCTYPE html>

<html>

<head>

<style>

 

p {

color:yellow !important; /* placed anywhere with !important in declaration of color will override color placed anywhere else*/

}

 

p {

font-family: verdana;

font-size: 20px;

color:red;

}

p {

color:orange; /* placed below above declaration will override color red */

}

 

</style>

</head>

<body>

 

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

Share this post


Link to post
Share on other sites

Hi, in some code of w3schools, I found that there is !important attribute. But I didn't understand it's using. Guys, please help me to understand it. Thank you in advance. :ninja::X::boredom::umnik2::facepalm::sorry::sorry:

!important is not preferable..there are other options available....still its used in w3schools webpages (in footer, thats where I have noticed)...there must be some strong reason...what is it?

Share this post


Link to post
Share on other sites

As far as I'm aware !important is used to overwrite any other styling of the same type. It forces something to change regardless of what order it comes in, in the main html document. You can avoid using !important all the time by putting your style sheets in a certain order. For example if your customising css code in bootstrap.

Share this post


Link to post
Share on other sites

You would just give the selector a higher a hierarchy ascendant parent, not swap stylesheets.

<!DOCTYPE html>
<html>
<head>
<style>
body p {
color:yellow; 
}

html body p {
color:green; 
}

p {
    font-family: verdana;
    font-size: 20px;
color:red;
}
p {
color:orange; /* placed below above declaration will override color red */
}

</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Share this post


Link to post
Share on other sites

As far as I'm aware !important is used to overwrite any other styling of the same type. It forces something to change regardless of what order it comes in, in the main html document. You can avoid using !important all the time by putting your style sheets in a certain order. For example if your customising css code in bootstrap.

 

As you said, important can be avoided all the time, then why & when to use important

Share this post


Link to post
Share on other sites

 

You would just give the selector a higher a hierarchy ascendant parent, not swap stylesheets.

<!DOCTYPE html>
<html>
<head>
<style>
body p {
color:yellow; 
}

html body p {
color:green; 
}

p {
    font-family: verdana;
    font-size: 20px;
color:red;
}
p {
color:orange; /* placed below above declaration will override color red */
}

</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

important can be avoided all the time, then why & when to use important

Share this post


Link to post
Share on other sites

Like mentioned 'Hi, in some code of w3schools, I found that there is !important attribute.' In that case you have to counterbalance that, by using '!important' also.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

CSS frameworks sometimes use the !important attribute on things that they don't want modified by the people using the frameworks. I can't say for certain why they decided to do that with W3.CSS.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×