While preparing for Microsoft's 70-480 exam I came across a question in which I had to sort different stylesheets according to their origin and importance, and I got a bit confused.
Even though I'm using CSS for more than 10 years, I've never dig into the specs to find out more about the terminology. When I finally spotted the right place in the specification it got more clear to me and I've decided to provide a simple illustration.
The cascading algorithm takes an unodrered list of declared values and outputs a single value that is called the cascaded value. The algoritm takes into account 3 factors:
- Importance: The importance of each declaration
- Specificity: The specificity of the css selectors
- Order: The order of the css declarations in the source code
The following illustration presents the way that the cascade algorithm determines the final declaration (cascaded value).
Lets verify the above diagram with a real example:
We are not going to cover all 3 steps of the cascading process, instead, we are going to explain only the first step, the importance.
Just to clarify some basic terms, consider the following rule:
background-color string defines a CSS property and is called a property declaration.
#ececec is the value given to the aforementioned property and is called the declared value.
Now, imagine that we have multiple CSS rules applied to the same element, declaring different values to the same property.
These rules may be at the same file, or may derive from different origins. The cascading algorithm has to choose one of those values to be the cascaded value.
There are 3 main origins defined in CSS:
- Author origin: The rules written by a web developer (the author of the page)
- User origin: The final user of the browser may be able to alter the user agent's default styles
- User agent origin: The default styles applied by the browser
plus 2 additions from CSS extensions
- Animation origin: Rules created by CSS animations
- Transition origin: Rules created by CSS transitions
- Normal: The default state of declarations
Important: Any declaration with the
Specification defines the following precedence for the above combinations in descending order (Top wins):
- Transition declarations
- Important user agent declarations
- Important user declarations
- Important author declarations
- Animation declarations
- Normal author declarations
- Normal user declarations
- Normal user agent declarations
Lets demonstarte the above hierarchy with some examples.
We start with a simple HTML page with only one
p element and no css declared, like this:
In this case, what style is going to be applied to the document? The answer is the default user agent style. Opening the developers tools in Chrome (Version 78.0.3904.108) we see the following:
As soon as we do not provide any kind of style, the browser applies the default user agent style.
Now, lets add a css file and add a rule for the
After we reference the new css file inside out HTML, we reload the page and we inspect the
Here we can verify the precedence of normal author declaration over user agent declaration.
What happens if we add an animation declaration?
According to the specification,
The last declaration in document order wins (see here)
So, we have intentionally placed the
color: green declaration after the animation declaration, in order to verify that animations takes precedence over normal author declarations, regardless of their location inside the source code.
The following screenshot illustrates the fact that animation declarations take precedence over normal author declarations, even if the latter are placed after the former, inside the source code.
According to the specification
The importance of a declaration is based on whether or not it is declared
The following screenshot illustrates the precedence of an important author declaration (
color: blue !important) over a normal one.
We have investigated the internals of the cascade algorithm and provided some simple examples trying to verify the expected behaviour.
We have, explicitly, verified the following facts:
- Precedence of normal author over normal user agent declarations
- Precedence of animations over normal author declarations
- Precedence of important author over normal author declarations
During the process of writing this post, I have tried to verify the predence of normal author declaration over normal user declaration, but I have failed to reproduce the expected behaviour, as shown in the following screenshot.
Here, I tried to add some user style declarations (
color: blue;) using the developer tools, but it seems that this rule takes precedence over the normal author declaration (
For anyone interested, here is a question I've posted on Stack Overflow regarding this issue.
Chrome version 78.0.3904.108 was used for the above examples