CSS Story

CSS Story: Tutorials and References

curated tutorials and reference resources by level

6.0 Tutorials

The tutorials below are organized by level. Basic tutorials assume no prior CSS knowledge. Intermediate tutorials expect familiarity with selectors, the box model, and normal flow. Advanced tutorials assume comfort with layout systems and the cascade.
Tutorial Topic What it covers
Basic
MDN: CSS Styling Basics Getting started Syntax, selectors, the box model, values and units - the essential foundation for everything else.
web.dev: Learn CSS Getting started Google-authored course; one chapter per concept with interactive code panels. Covers the full language systematically.
CSS-Tricks: Complete Guide to Flexbox Layout Visual reference covering every flexbox container and item property with diagrams and live examples.
CSS-Tricks: Complete Guide to Grid Layout Visual reference for all grid container and item properties. The go-to for quick lookups while building grid layouts.
Intermediate
MDN: CSS Layout Layout Module covering normal flow, flexbox, grid, positioning, and responsive design in sequence.
MDN: Positioning Positioning Step-by-step coverage of all five position values with live examples; explains containing blocks and stacking.
MDN: Understanding z-index Stacking Four-part series on stacking order, stacking contexts, and the common z-index bugs that arise from them.
web.dev: Responsive Design Responsive Media queries, fluid layouts, viewport meta, and an introduction to container queries.
MDN: Using CSS Transitions Animation How transitions work, which properties are animatable, timing functions, and combining multiple transitions.
Advanced
MDN: CSS Custom Properties Variables Inheritance rules, fallback values, invalid-at-computed-value time, and reading/writing from JavaScript.
MDN: CSS Cascade Layers Cascade Full @layer tutorial with ordering rules, nested layers, and interaction with !important.
CSS-Tricks: Cascade Layers Cascade Practical guide to @layer with real-world use cases including third-party containment and utility ordering.
MDN: CSS Animations Animation Keyframe animations, timing functions, fill mode, direction, iteration, and compositing with transitions.
web.dev: Container Queries Responsive Component-scoped responsive design with @container - size, style, and state queries.

6.1 References

The references below are grouped by the level of CSS knowledge needed to use them effectively. Basic resources are browsable without deep background. Intermediate resources assume working knowledge of layout and the cascade. Advanced resources address specification-level detail.
Resource Type Description
Basic
MDN CSS Reference Property reference Complete property-by-property reference with formal syntax, examples, and browser compatibility tables.
cssreference.io Visual reference Each property shown with live rendered demos. Ideal for quickly seeing what a property does without reading prose.
CSS-Tricks Almanac Property reference Searchable guide to every CSS property and selector with concise explanations and demos.
Intermediate
Can I Use Compatibility Browser support tables for every CSS feature. Check here before deploying any feature with limited support.
MDN: Cascade, Specificity, and Inheritance Cascade Explains exactly how the cascade resolves conflicts: origin, importance, specificity, and source order in sequence.
MDN: The Box Model Layout model Visual explanation of content, padding, border, and margin areas; box-sizing and inline vs. block boxes.
CSS-Tricks Guides In-depth guides Authoritative long-form guides on flexbox, grid, custom properties, and many other CSS techniques.
Advanced
MDN: @layer Cascade Full reference for cascade layers: declaration syntax, ordering, nesting, anonymous layers, and !important reversal.
MDN: Stacking Context Stacking Lists every property that creates a stacking context and explains the painting order within and across contexts.
MDN: CSS Containment Performance contain, content-visibility, and their effect on layout, paint, and style recalculation.
W3C: CSS Values and Units Level 4 Specification Formal spec for all CSS value types, calc(), min(), max(), clamp(), and custom properties.
W3C: CSS Specifications Index Specification Index of all CSS module specifications. Authoritative source when browser behavior differs from documentation.