HTML and CSS Reference
In-Depth Information
Inline styles have a weight of 1000 and outweigh even id rules.
<p style="color: black;">Text</p>
To override all other conflicting styles, including those defined as inline styles, a
declaration can be declared as
!important
. Note that the
!important
modifier is applied
to individual declarations, not entire rules.
p { color: red !important; }
If the specificity between two conflicting rules is the same, the cascade is what
determines which rule is applied.
Cascade
In CSS, more than one style sheet can influence a document's presentation. This feature
is known as cascading (the “C” part of CSS) because the browser merges all style sheets to
resolve any conflicts before the styles are applied.
Web documents can have style sheets that come from three different sources: the
browser, site designer and user reading the document. The designer's style sheet usually
has the highest priority, followed by the user's personal style sheet (if any) and then the
browser's default one.
Designer styles
As discussed earlier, web designers have three ways to include CSS rules: inline styles,
internal style sheets, and external style sheets. Among these three, inline styles are given
the highest precedence, followed by internal style sheets and then external style sheets.
If the web page includes more than one external style sheet with conflicting rules
(same specificity), the style sheet that is included last in the HTML markup is given
precedence. This is also true within a style sheet. If the selectors are the same, the
property declared last is the one that counts.
p { color: orange; } /* overridden */
p { color: silver; } /* dominant */
For inherited styles, an element's own style has priority over style inherited from
its ancestors.
p { color: orange; } /* dominant */
body { color: silver; }
