You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You now know three different places to put your CSS: **Inline**, **Internal**, and **External**. But what happens when you set an element's color to blue in an external file and then try to set it to red using an internal style?
8
+
You now know there are three ways to write CSS: Inline, Internal, and External. But what happens when you accidentally apply **two different styles**to the same element?
9
9
10
-
The browser uses three fundamental principles, often called the **C-S-I**(Cascade, Specificity, Inheritance), to decide which rule wins and is actually applied. This is the **most crucial concept** in CSS.
10
+
The browser doesn't guess; it uses a strict set of rules known as the **Cascade** to determine which style wins. The Cascade is the process that combines three core concepts to resolve conflicts and apply the final styles:
11
11
12
-
## 1. The Cascade: Where Does the Style Come From?
12
+
1.**The Cascade:** Where does the style come from?
13
+
2.**Specificity:** How detailed is the selector?
14
+
3.**Inheritance:** Does the element automatically get its parent's style?
13
15
14
-
The **Cascade** determines the order in which CSS rules are processed and how conflicts are resolved based on the **source and order** of the styles.
16
+
## 1. The Cascade: Order and Source
15
17
16
-
In a conflict, the browser looks at the following sources, in order of increasing importance:
18
+
The **Cascade** is the primary system for layering styles. It decides the initial winner based on the origin and order of the stylesheet.
17
19
18
-
### A. Origin and Importance (The !important Rule)
20
+
### Source Order (The "Where" of the Style)
19
21
20
-
| Order | Source | Description |
22
+
Styles are prioritized based on their source. Think of it as a river flowing downhill—styles closer to the element tend to flow last and have more power:
23
+
24
+
| Priority | Source | Description |
21
25
| :--- | :--- | :--- |
22
-
|**1 (Lowest)**|Browser Defaults | The default styling applied by the browser (e.g., links are blue and underlined). |
23
-
|**2**|User Stylesheets | Styles set by the user (rare, used for accessibility purposes). |
24
-
|**3**| Author Stylesheets |**Your code** (External, Internal, and most Inline styles). |
25
-
|**4 (Highest)**|`!important`| Any rule followed by `!important` overrides almost everything else. **Avoid using this**unless absolutely necessary, as it breaks the natural flow of the cascade. |
26
+
|**Highest**|**User Styles** (High Specificity) | Styles applied directly by the user (e.g., accessibility settings). |
27
+
|**2nd Highest**|**Author's Styles** (`!important`) | Any rule in your CSS file marked with `!important`. |
28
+
|**3rd Highest**|**Author's Styles** (Normal) |**Your External, Internal, and Inline styles** (where Specificity rules the day). |
29
+
|**Lowest**|**Browser Default Styles**| Default styles set by the browser (e.g., blue links, large `<h1>`). |
26
30
27
-
### B. Order of Appearance
31
+
### **The Role of Order:**
28
32
29
-
If two rules have the exact same **Origin** (e.g., both are in your external file) and the same **Specificity** (covered next), the rule that appears **later**in the stylesheet or the HTML document **wins**.
33
+
If two rules have the exact same Specificity (we'll cover this next) and come from the same source (e.g., two rules in your external stylesheet), the **last rule defined wins**.
30
34
31
35
```css title="styles.css"
32
-
/* Rule 1 appears first */
33
-
p { color: red; }
34
-
35
-
/* Rule 2 appears later and has the same specificity, so it wins */
36
-
p { color: blue; }
37
-
/* The paragraph will be blue. */
38
-
````
36
+
p { color: blue; } /* This rule is defined first. */
37
+
p { color: red; } /* This rule is defined last, so all <p> text will be RED. */
38
+
```
39
39
40
40
## 2. Specificity: Who is More Precise?
41
41
42
-
When multiple rules target the same element, **Specificity** is the unique score assigned to a CSS selector that determines which rule is applied. The selector with the **higher score always wins**, regardless of the order it appears in the stylesheet.
42
+
When two or more selectors try to style the same element, the browser calculates which selector is **more specific**. The selector with the highest specificity score always wins, regardless of where it appears in the CSS file (unless it's overridden by `!important`).
43
43
44
-
### Specificity Scoring
44
+
Specificity is calculated by counting different types of selectors. Think of it as a four-digit number $(A, B, C, D)$, where the highest number in the most significant column wins.
45
45
46
-
Specificity is calculated using afour-digit number, often written as `(A, B, C, D)`.
| Selector | Score (A, B, C, D) | Total | Result |
60
+
| :--- | :--- | :--- | :--- |
61
+
|`h1`| (0, 0, 0, 1) | 1 |**Loses**|
62
+
|`.header-title`| (0, 0, 1, 0) | 10 |**Wins** (The class is 10 times more specific than the element.) |
63
+
64
+
| Selector | Score (A, B, C, D) | Total | Result |
65
+
| :--- | :--- | :--- | :--- |
66
+
|`#sidebar p`| (0, 1, 0, 1) | 101 |**Wins**|
67
+
|`.card .title`| (0, 0, 2, 0) | 20 |**Loses** (ID selector is 100 points, dominating the score.) |
64
68
65
-
**Result:** The style from `#header h1` will win and be applied, even if `.page-title` appears after it in the CSS file, simply because **101 is greater than 10**.
69
+
:::tip Specificity Tip
70
+
Never use Inline Styles and try to reserve **ID selectors** (`#`) for JavaScript targeting rather than styling, as their high specificity makes CSS harder to override and maintain.
71
+
:::
72
+
73
+
## The Power of `!important`
74
+
75
+
The `!important` keyword is the nuclear option of CSS. When added to a declaration, it instantly makes that style rule **override all other rules**, regardless of specificity.
76
+
77
+
```css title="styles.css"
78
+
/* This style will win over any ID, Class, or Element selector */
79
+
p {
80
+
color: green!important;
81
+
}
66
82
67
-
:::tip Analogy
83
+
/* Even if an ID tries to override it, the !important rule wins */
84
+
#main-contentp {
85
+
color: red; /* This will be ignored */
86
+
}
87
+
```
68
88
69
-
Specificity is like a bidding war. An **Inline Style** is a million dollars (1000). An **ID** is a thousand dollars (100). A**Class** is a hundred dollars (10). Whoever bids more wins!
89
+
:::danger When to Avoid `!important`
90
+
91
+
**Avoid using `!important`!** It breaks the natural cascade flow and specificity rules, making your code extremely difficult to debug and maintain. Only use it in rare cases like:
92
+
93
+
1. Overriding third-party library styles where you can't edit the source CSS.
<p>This paragraph inherits the font from its parent <div>.</p>
127
+
<pstyle="border: none;">But it DOES NOT inherit the border or padding.</p>
128
+
</div>
129
+
```
76
130
77
-
**Inheritance** is the third principle, determining how styles flow down the document tree from parent elements to their children.
131
+
The browser applies the `font-family` to the `<p>` elements, but since `border` is not inherited, the `<p>` tags will not have a border unless one is specifically declared for them.
78
132
79
-
Some properties are naturally **inherited** (passed down), while others are not.
133
+
## Interactive Cascade Order Demo
80
134
81
-
### Properties that Inherit
135
+
This interactive example shows how **Specificity** (ID vs. Class) and **Source Order** (last rule wins) determine the final style.
82
136
83
-
***Text and Font properties** generally inherit: `color`, `font-family`, `font-size`, `line-height`, `text-align`.
84
-
* If you set the `font-family` on the `<body>` element, all paragraphs and headings inside the `<body>` will automatically use that font.
137
+
In the CSS panel, try changing the color values and observe which rule wins based on the selector's power.
85
138
86
-
### Properties that Do Not Inherit
139
+
<CodePenEmbed
140
+
title="Interactive Cascade Order Demo"
141
+
penId="MYyyqpB"
142
+
/>
87
143
88
-
***Box Model properties** generally do not inherit: `margin`, `padding`, `border`, `width`, `height`.
89
-
* If you seta `border: 2px solid black;` on the `<div>`, its child elements will *not* automatically get that border. This makes sense, as you wouldn't want every nested element to inherit its parent's spacing\!
90
144
91
-
### Controlling Inheritance
145
+
### Observations
92
146
93
-
You can force any property to inherit or not using these special keywords:
147
+
1. The first paragraph's color is **Purple** because the **ID selector (`#intro-paragraph`)** has the highest Specificity score (100), overriding the Class (`.main-text`, score 10) and Element (`p`, score 1) selectors.
148
+
2. The `font-weight` is **Bold** because it is set by the Class selector (Rule 2), and the ID selector (Rule 3) does not attempt to change the `font-weight`, allowing the inherited property to apply.
149
+
3. The second paragraph (which has no class or ID) should take the color of the **last `p` rule defined in the CSS** if they were the only ones present. However, because the class and ID rules are present, they dominate the first paragraph.
94
150
95
-
| Keyword | Purpose |
96
-
| :--- | :--- |
97
-
| `inherit` | Forces a child element to take the computed value of the parent element (even if it normally wouldn't inherit). |
98
-
| `initial` | Resets the property to its default browser value. |
99
-
| `unset` | Resets the property to either the inherited value (if it's an inherited property) or the initial value (if it's not). |
151
+
**The Cascade is a complex dance of Specificity first, and Source Order second.**
0 commit comments