Css Module 47

 Module 47 : CSS Cascade & Specificity Deep Dive,

Understand the CSS cascade process and how style conflicts are resolved.

Master the concept of specificity and how selectors are ranked.

Comprehend the role of inheritance in CSS and which properties are inherited.

Apply  techniques to control and troubleshoot CSS behavior.

Conduct experiments to test and observe CSS priority rules in action.

1. Understanding the CSS Cascade

1.1 What is the Cascade?

          

The cascade is the process that determines which CSS rules apply to an element when multiple rules target the same element.

The Cascade Order

CSS rules are applied based on the following order of importance:

Importance (Important! declarations)

Origin (Author, User, or Browser styles)

Specificity

Source order (last defined wins)

Example:

html code

<style> p { color: blue; } .highlight { color: green; } #main-text { color: red; } p { color: purple !important; } </style> <p id="main-text" class="highlight">This is a paragraph.</p>

Final color? purple, because of !important.

2. CSS Specificity

2.1 What is Specificity?

Specificity is a measurement of how specific a selector is. It’s used to determine which rule is applied when multiple rules target the same element.

Specificity Hierarchy (From lowest to highest):

Universal selector * → (0,0,0,0)

Element/tag selector div → (0,0,0,1)

Class/attribute/pseudo-class .class, [type="text"], :hover → (0,0,1,0)

ID selector #id → (0,1,0,0)

Inline styles → (1,0,0,0)

!important declarations override all (except inline important vs external important, where specificity still matters)

Practical Example:

html

 code

<style> div { color: black; } /* 0,0,0,1 */ .text { color: green; } /* 0,0,1,0 */ #main { color: blue; } /* 0,1,0,0 */ div.text#main { color: red; } /* 0,1,1,1 */ </style> <div id="main" class="text">Hello World!</div>

Final color? red, because its combined specificity is higher.

3. Inheritance in CSS

3.1 What is Inheritance?

Some CSS properties are naturally inherited by child elements (like color, font-family), while others are not (like margin, padding, border).

       

Inheritable Properties:

color

font-family

line-height

visibility

Force Inheritance Using:

css

 code

.some-element { border: inherit; }

Practical Example:

html

 code

<div style="color: blue;"> <p>This text is blue.</p> <span>This is also blue.</span> </div>

4. Combining Cascade, Specificity & Inheritance

Understand how all three work together to determine final styles.

5. Practical Methods for Managing CSS Priority

5.1 Use Clear Naming Conventions (BEM, SMACSS, etc.)

html

code

<div class="card card--primary"> <p class="card__text">Styled text</p> </div>

5.2 Avoid !important Unless Necessary

Only use !important for utility classes or overrides that you intentionally want to win.

5.3 Use Developer Tools to Inspect Specificity

Right-click → Inspect Element → Check computed styles and overridden styles in browser DevTools.

6. Exercises

Exercise 1: Specificity Calculation

           

Code:

css

 code

/* Calculate specificity */ div p { color: red; } .content p { color: blue; } #main p { color: green; }

HTML:

html

 code

<div id="main" class="content"> <p>Hello World</p> </div>

Task: Which color will the <p> element be?

Answer: Green – #main p has the highest specificity.

Exercise 2: Overriding Styles

Code:

css code

a { color: blue; } a:hover { color: green; } a:visited { color: purple; } a.special { color: orange !important; }

Task: Test different link states in a browser. Which styles override which and when?

Exercise 3: Inheritance vs Explicit Styles

Code:

html

 code

<div style="color: red;"> <span style="color: inherit;">Text</span> </div>

Task: Observe the final color of the span.

7. CSS Battle Royale

Goal: Test how multiple conflicting rules behave when layered together.

Step 1: Create an HTML page with a single <p> element.

html

code

<p id="main" class="highlight special" style="color: pink;">Cascade Test</p>

Step 2: Add the following styles:

css

code

p { color: black; } #main { color: blue; } .highlight { color: green; } .special { color: orange !important; } p#main.highlight.special { color: purple; }

Step 3: Predict the result.

               

Step 4: View in browser and confirm.

Explanation: Orange wins due to !important, despite combined specificity of the final rule being very high.

8. Summary

Cascade controls rule conflicts.

Specificity determines rule importance.

Inheritance passes styles to child elements naturally.

Proper use of these principles leads to predictable and maintainable CSS.

9. Assignment

Build a small web page with:

A header, navigation, main content, and footer.

Use conflicting styles with different levels of specificity.

Test different use cases with and without !important, inline styles, and inheritance.

Document which rules win and why.