When to use the important property in CSS

Question

Consider    div p       color  red  important         div p       color  blue      I understand how  important works  In this case the div will render red because now it has priority   important   But I can t still figure out an appropriate situation to use it in  Is there an example where  important saves the day

User · Answer

Overwriting the Style Attribute

Say in the example that you are unable to change the HTML source code but only provide a stylesheet. Some thoughtless person has slapped on a style directly on the element (boo!)

_x000D_

       div { background-color: green !important }

_x000D_

    <div style="background-color:red">_x000D_
    <p>Take that!</p>_x000D_
    </div>

_x000D_

Here, !important can override inline CSS.

User · Answer

This is a real  real life scenario  because it actually happened yesterday    Z-index in jQuery dialog  Autosuggest list not displayed properly   Alternatives to not using  important in my answer included    Hunting down in JavaScript CSS where a certain elusive property was being applied  Adding the property with JavaScript  which is little better than using  important    So  a benefit of  important is that it sometimes saves time  If you use it very sparingly like this  it can be a useful tool   If you re using it just because you don t understand how specificity works  you re doing it wrong     Another use for  important is when you re writing some kind of external widget type thing  and you want to be sure that your styles will be the ones applied  see    Appended control  39 s CSS

User · Answer

You use  important to override a css property   For example  you have a control in ASP NET and it renders a control with a background blue  in the HTML   You want to change it  and you don t have the source control so you attach a new CSS file and write the same selector and change the color and after it add  important   Best practices is when you are branding   redesigning SharePoint sites  you use it a lot to override the default styles

User · Answer

The use of  important is very import in email creation when inline CSS is the correct answer  It is used in conjunction with  media to change the layout when viewing on different platforms  For instance the way the page looks on desktop as compare to smart phones  ie  change the link placement and size  have the whole page fit within a 480px width as apposed to 640px width

User · Answer

important is somewhat like eval  It isn t a good solution to any problem  and there are very few problems that can t be solved without it

User · Answer

I am planning to use  important for a third-party widget meant to be embedded in a large number of websites out of my control   I reached the conclusion  important is the only solution to protect the widget s stylesheet from the host stylesheet  apart from iframe and inline styles  which are equally bad   For instance  WordPress uses    left-area ul       list-style-type  disc      padding  0 0 23px 16px      line-height  26px      This rule threathens to override any UL in my widget because id s have strong specificity  In that case  systematic use of  important seems to be one of the few solutions

User · Answer

I m using  important to change the style of an element on a SharePoint web part  The JavaScript code that builds the elements on the web part is buried many levels deep in the SharePoint inner-workings   Attempting to find where the style is applied  and then attempting to modify it seems like a lot of wasted effort to me  Using the  important tag in a custom CSS file is much  much easier

User · Answer

This is a real-world example   While working with GWT-Bootstrap V2  it will inject some CSS file  which will override my CSS styles  In order to make my properties to be not overridden  I used  important

User · Answer

Strictly speaking you shouldn t need to use  important if you ve structured your CSS well and don t have too many degrees of specificity   The most appropriate time to use  important is when you have one exceptional style that you want to style outside of your site s normal cascade

User · Answer

I have to use  important when I need to overwrite the style of an HTML generated by some JavaScript  plugin   like advertising  banners  and stuff  that uses the  style  attribute   So I guess that you can use it when you don t control the CSS

User · Answer

You generally use  important when you ve run out of other ways to increase the specificity of a CSS selector   So once another CSS rule has already dabbled with Ids  inheritance paths and class names  when  you need to override that rule then you need to use  important

User · Answer

Using  important is generally not a good idea in the code itself  but it can be useful in various overrides   I use Firefox and a dotjs plugin which essentially can run your own custom JS or CSS code on specified websites automatically   Here s the code for it I use on Twitter that makes the tweet input field always stay on my screen no matter how far I scroll  and for the hyperlinks to always remain the same color   a  a       color  rgb 34  136  85   important        count-inner    color  white  important         timeline-tweet-box    z-index  99  important  position  fixed  important  left  5   important         Since  thankfully  Twitter developers don t use  important properties much  I can use it to guarantee that the specified styles will be definitely overridden  because without  important they were not overridden sometimes  It really came in handy for me there

User · Answer

This is the real life scenario  Imagine this scenario   You have a global CSS file that sets visual aspects of your site globally  You  or others  use inline styles on elements themselves which is usually very bad practice    In this case you could set certain styles in your global CSS file as important  thus overriding inline styles set directly on elements   Actual real world example   This kind of scenario usually happens when you don t have total control over your HTML  Think of solutions in SharePoint for instance  You d like your part to be globally defined  styled   but some inline styles you can t control are present   important makes such situations easier to deal with   Other real life scenarios would also include some badly written jQuery plugins that also use inline styles     I suppose you got the idea by now and can come up with some others as well   When do you decide to use  important   I suggest you don t use  important unless you can t do it any other way  Whenever it s possible to avoid it  avoid it  Using lots of  important styles will make maintenance a bit harder  because you break the natural cascading in your stylesheets

[html] When to use the !important property in CSS

Overwriting the Style Attribute

Examples related to html

Examples related to css