Do you think IIT Guwahati certified course can help you in your career?
Introduction
CSS has Cascading in its name itself. CSS stands for Cascading Stylesheets. Cascade and specificity come into play whenever there are conflicts between multiple CSS rules that apply to the same HTML element. Cascade is the mechanism that resolves the conflict and decides which rule to be used for the particular element, while specificity is one of the four stages of the cascade.
Understanding the cascade
Understanding the cascading algorithm will help you know how the browser resolves the conflicts whenever two or more competing CSS rules apply to the same element.
What will be the colour of the text of the button?
button { color: red; }
button { color: blue; }
The colour will be blue.
The Cascade algorithm has four stages governing its priority.
Origin & Importance
Selector Specificity
Order of Appearance
Initial & Inherited Properties (default values)
Origin and importance
The highest weighted characteristic checked by a cascade is the combination of !important and the origin of a given rule. This origin could be the browser provided stylesheet, styles by your browser extensions or the operating system, and CSS authored by you. The specificity order of origin from least to most specific is given below:
User-Agent: These are the styles provided by your browser for the element. Hence inputs can look slightly different on different browsers. This is also one of the reasons for people to use CSS resets, to override the user-agent styles.
Local user styles: These can come from the operating systems or browser extensions. These are controlled and used by the user of the browser. It’s basically for overriding styles and adding accessibility to websites.
Authored CSS: This is the CSS authored by you.
CSS Animations, @keyframes: It is the only exception. It still originates from the author, but the browser weights them slightly higher than normal author rules since animations are temporary.
Author & !important: !important added by you to your authored declarations
Local user styles & !important: !important coming from the operating system or browser extension CSS
User-Agent & !important: !important declared in default CSS provided by your browser.
Transition rule type: The transition rule type has higher importance than !important. This is because when a transition becomes active, the change in visual behaviour is all expected.
Whenever two conflicting CSS declarations come in front of the browser and if one of them wins at the origin & importance level, the CSS cascade resolves the conflict.
But if the conflicting CSS declarations have the same origin importance level, the cascade moves to the selector specificity.
Selector specificity
The second most weighted tier in the CSS cascade is selector specificity. In this tier, the types of selectors used in the CSS declaration are considered and compared.
Specificity is an algorithm to determine which CSS selector is more specific. It has a definite scoring system for various selectors. A selector with the highest specificity wins even if some other selector with similar CSS is declared later. More details about specificity are mentioned in the latter part of the blog.
Order of appearance
The order of appearance is also the main tier the cascade algorithm considers in the resolution of conflicts. When two selectors have the same specificity, the last is considered to be won.
If you have a <link> including CSS at the top of your HTML page, and another <link> including CSS at the bottom of the same page: the bottom <link> will have the most specificity. The same rule is applied to embedded <style> elements, too. The last one will get more specificity.
The colour of the background will be purple. Because purple is declared after the green, hence the last one will be declared won.
That ordering also applies to embedded <style> elements. If a <link> is declared after them, the linked stylesheet's CSS will have the most specificity.
The colour of the background will be pink. The embedded <style> origin is declared after the <link> tag. Here the position rule makes the style win.
Understanding specificity
Specificity is one of the main parts of the cascade. Different types of CSS selectors are assigned some specificity score. The final specificity can be considered as the total score. The selector with the highest score is declared to win.
In the actual project, keep your specificity only as high as you need for your expected CSS rule to be applied. Aiming for the highest possible specificity makes things complex. In future, if some more important CSS needs to be used, it becomes a tough job. Keeping your selector specificity low ensures that your CSS rules stay flexible.
Scoring of selector types
Each selector type has some definite specificity score. Specificity is a cumulative property. All the scores can be added to get the specificity of a particular selector.
Universal selector
A universal selector (*) has no specificity and gets a 0 score. It means that any rule with 1 or more points will override it.
* { color: red; }
Element or pseudo-element selector
An element(type) or pseudo-element selector gets a specificity score of 1
Type selector
div { color: red; }
Pseudo-element selector
::selection { color: red; }
Class, pseudo-class, or attribute selector
A Class, pseudo-class, or attribute selector gets a specificity score of 10
Class selector
.my-class { color: red; }
Pseudo-class selector
:hover { color: red; }
Attribute selector
[href='#'] { color: red; }
The : not() itself doesn’t add anything to the specificity score. But the selectors provided along with add to the specificity score
div:not(.my-class) { color: red; }
This example will have an overall specificity score of 11 because one type selector (div) and one class selector inside the : not() will add 1 and 10 specificity respectively to the overall score.
ID selector
An Id selector is given a specificity score of 100, until you are using an ID selector (#myID) and not an attribute selector ([id="myID"]).
#myID { color: red; }
Inline style attribute
CSS applied to the style attribute of the HTML element, is given a specificity score of 1,000. This means that an extremely specific selector will be needed to override it in CSS.
<div style="color: red"></div>
!important rule
An !important at the end of a CSS element gets the highest value of specificity of 10,000 points.
Adding !important to a CSS rule ranks it the first in the cascade algorithm, that’s why it’s not recommended. The styles using !important can only be overridden by another rule that uses !important, which makes your CSS complicated and restricts your flexibility. !important is recommended to use as an escaping path when everything else fails to work.
Frequently asked questions
How can understanding the cascade help me write better CSS?
Knowing how the cascade works can give you an edge to keep your stylesheets maintainable. Knowing how to use selector specificity to your advantage can help you a lot. Be more careful while using some more specific selectors like !important. They result in your stylesheet being harder to update or override in future.
What is the importance of cascade in CSS?
Many times you will find that two or more competing CSS rules apply to the same element. In such a situation, the cascade algorithm solves the conflict and decides which rule to apply to that particular element.
What are the three principles of Cascade?
Origin and !important- the origin of the style and use of !important with it, Selector specificity- one with the highest specificity wins, Order of appearance- among the selectors having the same specificity, the one coming at the last is declared to win.
Key Takeaways
Having an in-depth knowledge of cascade and specificity will help you make your stylesheets more flexible. Many CSS go straight to the !important escape hatch when a higher-specificity selector would have served the cause. If you’re primarily using class selectors, you can easily do this by nesting selectors or adding another class in case you need an override.
!important does come in handy if you are working with component libraries that use inline styles or CSS libraries that are not in your control.
Already excited?. Learn Web development from top courses provided by Coding Ninjas like ‘Full Stack Web Development Course with Node.js + HTML/CSS/JS’. These courses will help you learn and master web development so that you can become a ninja in it!.
Live masterclass
Zomato Data Analysis Case Study: Ace 25L+ Roles in FoodTech
by Abhishek Soni
16 Mar, 2026
01:30 PM
Data Analysis for 20L+ CTC@Flipkart: End-Season Sales dataset
by Sumit Shukla
15 Mar, 2026
06:30 AM
Beginner to GenAI Engineer Roadmap for 30L+ CTC at Amazon
by Shantanu Shubham
15 Mar, 2026
08:30 AM
Multi-Agent AI Systems: Live Workshop for 25L+ CTC at Google
by Saurav Prateek
16 Mar, 2026
03:00 PM
Zomato Data Analysis Case Study: Ace 25L+ Roles in FoodTech
by Abhishek Soni
16 Mar, 2026
01:30 PM
Data Analysis for 20L+ CTC@Flipkart: End-Season Sales dataset
39+ registered 
