# Cascade

According to the W3C:

The **cascade** takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value.\
The cascade sorts declarations according to the following criteria, in descending order of priority:

### Origin and Importance <a href="#origin-and-importance" id="origin-and-importance"></a>

The origin of a declaration is based on where it comes from and its importance is whether or not it is declared `!important` The precedence of the various origins is, in descending order:

1. Transition declarations
2. Important user declarations
3. Important author declarations
4. Important user agent declarations
5. Animation declarations
6. Normal user declarations
7. Normal author declarations
8. Normal user agent declarations

_Declarations from origins earlier in this list win over declarations from later origins._

### Specificity <a href="#specificity" id="specificity"></a>

The [Selectors module](https://www.w3.org/TR/selectors/#specificity) describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. For the purpose of this step, declarations that do not belong to a style rule (such as the [contents of a style attribute](https://www.w3.org/TR/css-style-attr/#interpret) ) are considered to have a specificity higher than any selector. The declaration with the highest specificity wins.

### Order of Appearance <a href="#order-of-appearance" id="order-of-appearance"></a>

The last declaration in document order wins. For this purpose:\
Declarations from imported style sheets are ordered as if their style sheets were substituted in place of the @import rule.\
Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language.\
Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets.



