Resources: CSS — Cascading Style Sheets¶

A curated list of verified, high-quality resources for learning CSS from beginner to expert. All URLs have been verified. If a URL becomes stale, replace it with a placeholder rather than leaving a broken link.

Official Specifications and References¶

1. MDN Web Docs — CSS — The definitive reference for every CSS property, selector, and at-rule. The best place to look up syntax, browser compatibility (via the compatibility table at the bottom of each article), and formal value definitions. Use it as a companion while reading every module.

2. W3C CSS Specifications — The formal W3C CSS specifications. Useful when you need to understand exactly how an algorithm (like the cascade or the flexbox placement algorithm) is supposed to work. Harder to read than MDN but authoritative.

3. Can I Use — Browser compatibility tables for CSS properties and features. Essential for checking whether a feature is safe to use in production without a polyfill or fallback.

Books¶

1. "CSS: The Definitive Guide" by Eric Meyer and Estelle Weyl (O'Reilly, 5^th edition) — The most comprehensive CSS book available. Covers every property in depth with clear explanations and examples. Suitable for beginners and used as a reference by experts. [Verify: confirm current edition and ISBN before purchasing]

2. "Every Layout" by Heydon Pickering and Andy Bell — Available at every-layout.dev — A collection of layout primitives (stack, sidebar, grid, cluster, frame, and more) implemented in intrinsic CSS. Teaches the reader to think algorithmically about layout rather than memorising specific techniques. Intermediate to advanced.

3. "Debugging CSS" by Ahmad Shadeed — A practical guide to diagnosing and fixing common CSS problems. Bridges the gap between knowing CSS syntax and writing it confidently. [Verify: confirm availability and publisher]

Online Courses and Interactive Learning¶

1. web.dev — Learn CSS — A free, structured CSS course by Google Chrome's developer relations team. Covers fundamentals through advanced topics with interactive examples and quizzes. Closely aligned with this curriculum's Phase 1–2 content.

2. CSS-Tricks — One of the longest-running CSS reference sites on the web. The Flexbox and Grid guides (/snippets/css/a-guide-to-flexbox/, /snippets/css/complete-guide-grid/) are among the most-linked CSS references on the internet. The almanac covers every CSS property.

3. Flexbox Froggy — A free, browser-based game for learning Flexbox by aligning frogs on lily pads. Covers all major flex properties in ~24 levels. Ideal companion to Module 04.

4. Grid Garden — A free, browser-based game for learning CSS Grid by growing a carrot garden. Ideal companion to Module 05.

Video¶

1. Kevin Powell — YouTube Channel — Kevin Powell produces clear, well-paced CSS tutorials covering everything from basic selectors to modern CSS features like container queries and cascade layers. His channel is consistently recommended by both beginners and experienced developers. Search "Kevin Powell CSS" on YouTube.

2. Lea Verou — CSS Secrets (talks and book) — Lea Verou is a W3C CSS Working Group Invited Expert and author of "CSS Secrets" (O'Reilly). Her conference talks (available on YouTube from events like CSSconf and SmashingConf) cover advanced CSS tricks, custom properties, and the internals of the CSS specification. [Verify: confirm "CSS Secrets" is current edition]

Tools¶

1. Mdn CSS Validator — W3C's CSS validator. Useful for catching syntax errors and checking compliance. Paste in CSS or provide a URL.

2. CSS Gradient Generator — A visual tool for generating CSS gradient syntax. Useful during Module 06 (Typography and Color).

Module-Specific Resources¶