m.s_shohan Posted October 13, 2016 Share Posted October 13, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2016 Share Posted October 13, 2016 <!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 comment Share on other sites More sharing options...
m.s_shohan Posted October 13, 2016 Author Share Posted October 13, 2016 Thank you for the help. Link to comment Share on other sites More sharing options...
richa.desai Posted January 18, 2017 Share Posted January 18, 2017 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. !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 comment Share on other sites More sharing options...
Heartless Posted January 25, 2017 Share Posted January 25, 2017 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 comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2017 Share Posted January 25, 2017 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 comment Share on other sites More sharing options...
richa.desai Posted January 27, 2017 Share Posted January 27, 2017 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 comment Share on other sites More sharing options...
richa.desai Posted January 27, 2017 Share Posted January 27, 2017 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 comment Share on other sites More sharing options...
dsonesuk Posted January 27, 2017 Share Posted January 27, 2017 (edited) 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 January 27, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
richa.desai Posted February 8, 2017 Share Posted February 8, 2017 @ dsonesuk ... please explain yourself. I did not get what you wanted to say in your last post Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2017 Share Posted February 8, 2017 IF !important is used you have no alternative but to use !important too, but! With higher parental hierarchy. Link to comment Share on other sites More sharing options...
richa.desai Posted October 26, 2017 Share Posted October 26, 2017 Yes, that is a different thing. Once used we need to reuse with higher parental hierarchy. Still, I have not received the answer to my question. Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2017 Share Posted October 26, 2017 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 comment Share on other sites More sharing options...
shaili_shah Posted May 1, 2019 Share Posted May 1, 2019 (edited) 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 May 1, 2019 by shaili_shah Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now