📘 CSS CASCADE — COMPLETE NOTE

🎯 1. What is the Cascade?

In CSS, many rules can apply to the same element.

👉 Example problem:

p {
  color: green;
}

p {
  color: blue;
}

❓ Which color will be used?

👉 This is called a conflict

🧠 Definition

Cascade = system that decides which CSS rule wins

⚙️ How it works

When multiple rules apply:

1. Styles are combined
2. Conflicts are resolved

👉 Browser uses:

• Specificity
• Order
• Inheritance

🔥 2. Example of Cascade

p {
  color: blue;
  background-color: orange;
}

p {
  color: teal;
}

👉 Result:

• color → teal (last rule wins)
• background → orange

🧠 3. Specificity (MOST IMPORTANT)

What is specificity?

Each selector has a weight (priority)

👉 The higher the weight → the stronger the rule

🏆 Specificity Levels

📊 Example

p {
  color: green; /* 1 */
}

section > p {
  color: orange; /* 2 */
}

👉 Winner: section > p (more specific)

🔹 4. Low Specificity (Element selectors)

p {
  color: green;
}

ul p {
  color: orange;
}

👉 orange wins (more elements in selector)

🔹 5. Class Specificity

.post-title {
  color: green;
}

.post > .post-title {
  color: orange;
}

👉 orange wins (more specific)

🎯 Complex example

a {
  color: green;
}

.post-link {
  color: orange;
}

a.post-link {
  color: blue;
}

.post > a.post-link {
  color: brown;
}

👉 Winner: brown (highest specificity)

🔹 6. ID Specificity

.post-title {
  color: green;
}

#title {
  color: orange;
}

👉 Winner: #title (ID is stronger)

🔹 7. Inline Styles (Strongest)

👉 This overrides everything

⚠️ Problem

• hard to change
• not scalable

🔥 8. Equal Specificity (IMPORTANT)

If specificity is the same → 👉 last rule wins

Example

a {
  color: teal;
}

a {
  color: brown;
}

a {
  color: orange;
}

👉 Final: orange

🔹 9. !important

🧠 What it does

Forces a rule to win

Example

p {
  color: orange !important;
}

p#id {
  color: blue;
}

👉 Winner: orange

⚠️ Warning

❌ Avoid using !important

Use only:

• when overriding external library

✅ Correct syntax

color: orange !important;

🔹 10. Avoid Specificity Problems

❌ Bad

.post > div > ul > li > a

👉 too complex

✅ Good practice

Use classes

🧠 3 approaches

1. Parent-based styling

.post > h1 { }
.post > p { }

❌ Not flexible

2. Mixed approach

.post > .title { }
.post > .text { }

✔ Better

3. Best approach (recommended)

.post-title { }
.post-text { }
.post-link { }

✔ simple
✔ scalable
✔ readable

🔹 11. Inheritance

🧠 What is it?

Child elements get styles from parent

Example

.post {
  color: green;
}

👉 All text inside becomes green

📄 HTML

  
Title
  
Text

👉 both inherit color

⚠️ Important

Not all properties are inherited

✅ Usually inherited

• color
• font
• text styles

🔹 12. Inheritance Exception

.post {
  color: green;
}

a {
  color: blue;
}

👉 link stays blue

🔹 13. inherit keyword

Forces inheritance

.post-link {
  color: inherit;
}

👉 link becomes same as parent

🔹 14. currentColor keyword

Uses current text color

Example

.link {
  color: red;
  border: 1px solid currentColor;
}

👉 border = red

Another example

.post {
  color: green;
}

.post-link {
  color: currentColor;
}

👉 link = green

🧠 FINAL SUMMARY

👉 Cascade = system that resolves conflicts

👉 Priority:

• inline > id > class > element

👉 If equal → last wins

👉 !important → overrides everything (avoid)

👉 Inheritance → children get styles

👉 inherit → copy parent value

👉 currentColor → use current color

💪 KEY RULE

👉 Use simple class selectors

👉 Avoid complex selectors

👉 Avoid !important