CSS is a very powerful tool that allows for nearly unlimited styling options for our HTML elements, but as a web site or app grows larger, so too does the possibility that an item targetted by two CSS rules may be receiving conflicting orders.
Take the following example:
Here, we are telling the
tag that the background color is blue AND green, so how does CSS decide where to apply its rules?
That’s where the C in CSS comes in: Cascade. The cascade is the process of combining different stylesheets and resolving any conflicts that may reside within the style declarations when more than one CSS rule applies to a certain HTML element.
Sources
First, we must look at where the CSS declaration is coming from, which can be a number of sources. Those include author declarations written by the developer; user declarations, which are changes made by the user in the browser; and default browser declarations. The cascade combines declarations from all these sources and then sorts them out based on the importance that is given to the element based on that order.
How are conflicts resolved?
To figure out which declaration will apply to an element, we need to examine, in order, its importance, its specificity and the order in which the conflicting declarations were declared in the code.
Importance
We first look at who declared the rules and whether a the !important tag was applied. The importance is read in the following order:
User !important declarations
Author !important declarations
Author declarations
User declarations
Default browser declarations
CSS will check this order and look for the !important tags, starting with what the user chooses as !important, since, because it was chosen by the user, it is the most important declaration we can have. If the developer uses the !important tag, it's obvious that that's the rule they want to be applied above all others. After that come vanilla author declarations followed by those chosen by the user in the browser, and finally the browser defaults.
But what if neither the user nor the author used !important? We then need to check specificity.
Specificity
If there’s no discernible difference in the importance of an element’s CSS rules, we need to move on to checking its specificity, particularly elements that are targeted by the CSS. Specificity is weighted, with weight decreasing in the following order: inline styles have the highest specificity; IDs; classes, pseudoclasses and attributes; and finally elements and pseudoelements. Each of these is represented as one of four numbers in a set of parentheses like so: (inline, ID, class, element). To determine which is most specific, create one of these sets for each CSS rule that targets the element and compare them. As you move from left to right, each rule that has a lower weight at each spot in the parentheses is dismissed until just one rule wins out.
Source Order
In the event that CSS rules have the same importance AND specificity, we finally turn to source order. This simply tells us to choose the declaration that is declared last in the code, and that will be the rule that is applied.
It can be easy to target the same HTML element with multiple CSS rules, but there's a great system in place to ensure that conflicts will ultimately be resolved. Knowing how that system works will make you a better coder and designer.
Top comments (1)
Need to wrap a [code] tag (in "<" and ">" brackets) to show the HTML tag inline after the "Here, we are telling the" line