CSS: Inheritance, Specificity, and the Cascade
1h 37mIntermediate2022-06-16
Authors

Jen Kramer
Teaches web design and development
Course details
CSS properties? Easy. CSS layout? Sure. Figuring out which part of a CSS stylesheet applies to a document, especially when there are multiple parts that might apply? Much harder. In this course, Jen Kramer explains that, yes, CSS has powerful rules for addressing these situations, and helps you figure out how to efficiently combine styles to make your website look exactly how you want it to look. After a quick CSS terminology review, Jen dives into the three parts of the cascade that work together to determine what style is displayed on a webpage: Inheritance, specificity, and the cascade itself. She looks at each part independently, then shows how the cascade works with inheritance and specificity to identify the final styling for a given page.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - The big C in CSS
- 02 - CSS terminology refresher
1. Understanding Inheritance
- 03 - What is inheritance
- 04 - Examples of inheritance
- 05 - Controlling inheritance with inherit
- 06 - Exploring initial, unset, revert, and all
- 07 - Challenge - Working with inheritance
- 08 - Solution - Working with inheritance
2. Understanding Specificity
- 09 - What is specificity
- 10 - How selectors and ordering impact specificity
- 11 - Selectors with no specificity
- 12 - The impact of inheritance on specificity
- 13 - Challenge - Explaining specificity
- 14 - Solution - Explaining specificity
3. Understanding the Cascade
- 15 - What is the cascade
- 16 - Identifying origins of CSS declarations using browser tools
- 17 - Sorting declarations by importance
- 18 - important - Its use and abuse
- 19 - @layer - Impacting specificity through components
Conclusion
- 20 - Moving forward with CSS