CSS: Inheritance, Specificity, and the Cascade

CSS: Inheritance, Specificity, and the Cascade

1h 37mIntermediate2022-06-16

Authors

Jen Kramer

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

Introduction

  • The big C in CSS
  • CSS terminology refresher

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

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

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
40,000 Toman