Origin/Importance trumps Specificity which, in turn, trumps Order of declaration. What's meant by Origin is the three different origins from which stylesheets may come (originate from):
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
- user agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- user important declarations
If the Origin/Importance is the same, only then do we check for Specificity (higher specificity obviously trumps lower specificity).
If both the Origin/Importance and the Specificity are the same, only then do we check for Order: rules that appear later in the code override earlier rules.
Inline styles affect Specificity; internal versus external stylesheets affects Order and it only depends on which one is defined later in the code. Either internal or external stylesheets may take precedence over the other. E.g.:
<head>
<link rel=stylesheet href="style.css">
<style>
h3{
color:red;
}
</style>
</head>
versus:
<head>
<style>
h3{
color:red;
}
</style>
<link rel=stylesheet href="style.css">
</head>
I.e. there is no hard and fast rule that says, e.g. that internal stylesheets have higher precedence over
external stylesheets (or vice-versa).
My personal favourite is the easeOutBack:
cubic-bezier(0.175, 0.885, 0.32, 1.275);