m.s_shohan 0 Posted October 13, 2016 Report 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. Quote Link to post Share on other sites
dsonesuk 925 Posted October 13, 2016 Report 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> Quote Link to post Share on other sites
m.s_shohan 0 Posted October 13, 2016 Author Report Share Posted October 13, 2016 Thank you for the help. Quote Link to post Share on other sites
richa.desai 0 Posted January 18, 2017 Report 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? Quote Link to post Share on other sites
Heartless 0 Posted January 25, 2017 Report 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. Quote Link to post Share on other sites
dsonesuk 925 Posted January 25, 2017 Report 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> Quote Link to post Share on other sites
richa.desai 0 Posted January 27, 2017 Report 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 Quote Link to post Share on other sites
richa.desai 0 Posted January 27, 2017 Report 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 Quote Link to post Share on other sites
dsonesuk 925 Posted January 27, 2017 Report 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 Quote Link to post Share on other sites
richa.desai 0 Posted February 8, 2017 Report Share Posted February 8, 2017 @ dsonesuk ... please explain yourself. I did not get what you wanted to say in your last post Quote Link to post Share on other sites
dsonesuk 925 Posted February 8, 2017 Report Share Posted February 8, 2017 IF !important is used you have no alternative but to use !important too, but! With higher parental hierarchy. Quote Link to post Share on other sites
richa.desai 0 Posted October 26, 2017 Report 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. Quote Link to post Share on other sites
Ingolme 1,034 Posted October 26, 2017 Report 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. Quote Link to post Share on other sites
shaili_shah 4 Posted May 1, 2019 Report 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 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.