CSS: Inheritance, Specificity, and the Cascade

Understand the C in CSS—the cascade—and how its three parts work together to determine the style of a website or document.

Introduction

• The big C in CSS
• CSS terminology refresher

1. Understanding Inheritance

• What is inheritance?
• Examples of inheritance
• Controlling inheritance with inherit
• Exploring initial, unset, revert, and all
• Challenge: Working with inheritance
• Solution: Working with inheritance

2. Understanding Specificity

• What is specificity?
• How selectors and ordering impact specificity
• Selectors with no specificity
• The impact of inheritance on specificity
• Challenge: Explaining specificity
• Solution: Explaining specificity

3. Understanding the Cascade

• What is the cascade?
• Identifying origins of CSS declarations using browser tools
• Sorting declarations by importance
• !important: Its use and abuse
• @layer: Impacting specificity through components

Conclusion

• Moving forward with CSS