MDN: CSS Cascade and Inheritance

specificity (source order?)

– rules later in source order generally override earlier rules
– .classes/#ids have higher specificity than element selectors
– #ids override .classes
– specificity measures how specific each selector is
– values given to each element selector: thousands, hundreds, ten, and ones

– overrides #ids
– changes normal way cascade works and mades debugging difficult

source order matters
– the third factor when selectors have same specificity and !importance
– rules coming after win over earlier stated rules
– when multiple style rules match the same element, all rules are applied then evaluated for conflicts and winners resolved
css rule mixing is explained at this link


– some property values will be inherited by the parent’s child elements, some won’t.
– for example, setting font-family and color on html element.
– likewise, it makes sense that padding, margin, border, background-image are not inherited, for every element would have to be reset.

inherit — sets to same as parent
selector : inherit;

initial — browser default, unless no default browser style. then set to inherit.
selector : initial;

revert — set to user’s stylesheet value, if any, then user agent’s if not
selector : revert;


Leave a Reply