CSS fundamentals

What you'll learn

• How a CSS rule is shaped, and how the browser pairs it to an element
• The handful of selectors that do 95% of the work
• Why two rules disagree — specificity, source order, and the cascade
• Inheritance and the four cascade keywords (inherit, initial, unset, revert)
• The box model, and why everyone sets box-sizing: border-box
• Units that don't lie — px, em, rem, %, vh/dvh, ch — and when each fits
• Positioning, stacking contexts, and z-index without superstition
• Custom properties — what they share with Sass variables, and what they don't

1. 01
   What CSS actually is

   A rule is a selector plus a block of property-value pairs. How the browser pairs that rule with an element on the page.
   12 min
2. 02
   Selectors that pay rent

   Element, class, id, attribute, descendant, child, :hover, :focus, :not — the five or six selectors that do 95% of the work.
   17 min
3. 03
   Specificity and the cascade

   Why one rule beats another. Origin, specificity, source order, and what !important actually does.
   18 min
4. 04
   Inheritance and the keyword cascade

   Which properties inherit, which don't, and what inherit, initial, unset, and revert each fix when you reach for them.
   15 min
5. 05
   The box model

   Content, padding, border, margin — and box-sizing: border-box, the one-line setting that ends an entire class of bugs.
   17 min
6. 06
   Units that don't lie

   px, em, rem, %, vh/vw/dvh, ch — what each one is measured against, and when each is the right pick.
   18 min
7. 07
   Positioning and stacking

   static, relative, absolute, fixed, sticky — plus stacking contexts and z-index without the superstition.
   18 min
8. 08
   Custom properties

   --var, var(), fallbacks, scoping. Why custom properties are not just Sass variables in CSS clothing.
   15 min