CSS declarations are applied in this order (from lowest to highest priority):
- user agent declarations (the default styles your browser applies to elements)
- user normal declarations (a user's own stylesheet if they're using one)
- author normal declarations (this is your normal stylesheet)
- author important declarations (anything your mark important)
- user important declarations (any important styles from the user's stylesheet)
Any conflicting rules are resolved within each level first, sometimes with specificity, or failing that, the last rule wins. Specificity is a number defined as:
- a: 1 if the declaration is from an inline style attribute, 0 otherwise
- b: the number of IDs in the selector (#one #two would be 2)
- c: the number of other attributes and pseudo-classes (:focus would be 1)
- d: the number of element names and pseudo-elements (div would be 1)
i.e an inline style would have a specificity of 1000, whereas a declaration in your stylesheet might have a specificity of 0100 or 0010 etc. - this is why inline styles override styles from stylesheets.
But, since the rules are applied in the order above, an important rule in a stylesheet can override an inline style (since author important styles are applied after author normal styles). e.g:
<p style="color: red">Will be black</p>
Rules in later declarations take precedence over rules in earlier declarations, so declarations in a style tag can override the declarations from a linked stylesheet if the style tag appears after the link tag. The rules mean you can use a normal stylesheet to override a user's own stylesheet, but you can never override any styles the user marks as !important.