CSS: Inheritance, Specificity, and the Cascade

CSS: Inheritance, Specificity, and the Cascade

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 36m | 289 MB

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.

Table of Contents

1 The big C in CSS
2 CSS terminology refresher

Understanding Inheritance
3 What is inheritance
4 Examples of inheritance
5 Controlling inheritance with inherit
6 Exploring initial, unset, revert, and all
7 Challenge Working with inheritance
8 Solution Working with inheritance

Understanding Specificity
9 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

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

20 Moving forward with CSS