Skip to content

Resources: Module 01 — Introduction to CSS

Verified resources specific to CSS fundamentals, the cascade, specificity, and inheritance. All URLs are current as of 2026-06-09. Check for updated URLs if links become stale.

Primary Reading

  1. MDN — How CSS is structured — MDN's guided introduction to writing CSS for the first time. Covers syntax, rule structure, and linking a stylesheet. Ideal companion to the first section of this module's Theory.

  2. MDN — Cascade, specificity, and inheritance — The definitive reference for the three concepts this module covers. Includes worked examples and the formal cascade algorithm. Read this alongside the Theory section.

  3. MDN — CSS Specificity — The dedicated MDN article for specificity, including the formal definition, all selector types, the !important exception, and the :is(), :has(), and :not() edge cases.

Interactive Tools

  1. Specificity Calculator — A visual, interactive tool where you type a CSS selector and instantly see its (A,B,C) specificity score broken down. Excellent for checking your work on Exercise 4.

  2. CSS Cascade Visualizer — web.dev Learn CSS — web.dev's cascade chapter includes interactive examples that animate which rule wins and why. More accessible than the W3C spec.

Reference

  1. MDN — CSS Reference: Properties — Alphabetical list of every CSS property with its definition, syntax, allowed values, and inheritance status. The "Formal definition" table on each property page shows whether it inherits.

  2. W3C CSS Cascade Level 5 Specification — The formal W3C specification for the cascade algorithm. Difficult to read as a learner, but authoritative for edge cases. Worth skimming the "Origin and Importance" section to understand the full picture.

Video

  1. "CSS Cascade Explained" — Kevin Powell (YouTube) — Kevin Powell has a series of videos explaining the cascade and specificity with clear visual demonstrations. Search for "Kevin Powell CSS cascade" on YouTube. His videos are particularly useful for learners who prefer a spoken explanation alongside code.

  2. "Why is CSS so Weird?" — Mozilla Developer (YouTube) — A history of CSS's design decisions, explaining why the cascade and specificity work the way they do. Understanding why the rules exist makes them far easier to remember.

Browser DevTools Guides

  1. Chrome DevTools: Inspect and Debug CSS — Google's official guide to using Chrome DevTools for CSS. The "View and change CSS" section is directly applicable to the debugging exercises in this module.

  2. Firefox DevTools: CSS Panel — Firefox's documentation for its CSS inspection tools. Firefox has some excellent specificity visualisation features.