Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Imagine different selectors are people shouting instructions at an HTML element:
Highest priority - styles in HTML
<div style="color: red;">Very high priority - unique identifiers
#header { color: blue; }Medium priority - reusable selectors
.button { ... }[type="text"] { ... }:hover { ... }Lowest priority - basic selectors
div { ... }::before { ... }<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h2>🏆 Specificity Battle</h2>
<!-- This element is targeted by 4 rules! -->
<p id="special" class="text" style="color: red;">
What color am I? Red!
</p>
<div class="code-box">
<code>/* Element: p { color: gray; } → 0,0,0,1 */</code>
<code>/* Class: .text { color: blue; } → 0,0,1,0 */</code>
<code>/* ID: #special { color: green; } → 0,1,0,0 */</code>
<code>/* Inline: style="color: red;" → 1,0,0,0 ✅ */</code>
</div>
<div class="winner">
🎯 Winner: Inline style (red) - Highest specificity!
</div>
</div>
</body>
</html>Loading preview...
The cascade is the algorithm browsers use to combine and resolve conflicting styles from different sources. It considers three main factors in order:
Browser styles → User styles → Author styles (your CSS)
!important reverses this order
If same origin, the selector with higher specificity wins
If same origin AND same specificity, the last rule in the code wins
Adding !important to a declaration makes it override almost any other rule:
color: red !important;