Jump to content

Why should I use !important attribute


Recommended Posts


<!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>

Link to post
Share on other sites
  • 3 months later...

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?

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.

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>
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

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

Link to post
Share on other sites
  • 2 weeks later...
  • 8 months later...

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.

Link to post
Share on other sites
  • 1 year later...
css:
p {
    font-size: 30px !important;
}
#thing {
    font-size: 20px;
}
   html:
<p id="thing">fontsize</p>

The paragraph is will be 30px in font-size, even though the ID selector has higher specificity. The !importantrule overrides that particular property.
 

Edited by shaili_shah
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...