Question

I am wondering if someone can put a bit of an authoritative reference summary of when the !important declaration in CSS does not work to override inline styles.

Answer 1

There are many factors involved in determining which styles override one another. The lower a style declaration appears in the cascade, and the more specific it is in targeting the element, the more it will weigh against other styles.

This is the CSS2 standard for style inheritance:

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
3. Otherwise use the property’s initial value. The initial value of each property is indicated in the property’s definition.

Internally, the browser will calculate the specificity of a rule, according to the standard. The !important declaration will add weight to the rule, but dynamically assigning a style attribute will often take precedence, because it is usually more-highly specified..