CSS

References, guides, and tools for modern CSS — layout, the cascade, color, and motion. Part of the Frontend Roadmap. See also Accessibility for contrast ratios and reduced motion, and Performance for render cost and critical CSS.

Learn

• Learn CSS — Course covering the whole language, from the box model to layout.
• MDN Styling Basics — MDN’s CSS learning path, from selectors to layout and text styling. [beginner]
• Learn Responsive Design — Course on layouts that hold up at any screen size.
• Modern CSS Solutions — Series rebuilding common UI patterns with current CSS.
• Interactive Guide to Flexbox — Flexbox taught through a playable demo of every property.
• Interactive Guide to Grid — Grid taught the same way, tracks and areas included.

Reference

Language reference

• CSS Reference #1 — List of all CSS properties.
• CSS Reference #2 — Extensive CSS reference with all the important properties.
• MDN CSS Reference — Every property, selector, function, and at-rule in one index.
• Can I use — Browser support tables for CSS features, version by version.
• Web Platform Status — Baseline availability of a feature across the major browsers.

Layout

• Flexbox Guide — Comprehensive guide to CSS flexbox layout.
• Grid Guide — Every grid property and value, with diagrams.
• Subgrid — Letting a nested grid inherit its parent’s tracks.
• Container Queries — Styling an element by the size of its container, not the viewport.
• Container Queries Guide — Worked examples, container units, and the gotchas.
• Box Sizing — Intrinsic sizing with min-content, max-content, and fit-content.
• Aspect Ratio — Holding a box’s proportions without the padding hack.
• Anchor Positioning — Tethering a positioned element to another element.
• CSS Layout — Collection of popular layouts and patterns.

The cascade

• The Cascade — How the browser picks a winner when declarations conflict.
• Specificity — The scoring system that decides which selector wins.
• Inheritance — Which properties pass down to children, and how to force it.
• Cascade Layers — @layer, for ordering whole blocks of CSS on purpose.
• The :has() Selector — Matching an element by what it contains, parents included.
• CSS Nesting — Native nesting, and where it differs from a preprocessor’s.
• Custom Properties — Declaring, scoping, inheriting, and falling back on CSS variables.
• Registered Custom Properties — @property, giving a variable a type so it can animate.

Responsive and fluid

• Media Queries — Range syntax, user-preference queries, and how to combine them.
• Clamp — clamp() for a value that scales between a floor and a ceiling.
• Utopia — Calculator for fluid type and space scales built on clamp().
• Logical Properties — Block and inline directions instead of top, right, bottom, left.
• Text Wrap — balance and pretty, for headings and paragraphs that break well.
• Field Sizing — Form controls that grow and shrink to fit their content.
• Defensive CSS — Snippets that stop layouts breaking on real content.

Color and typography

• OKLCH — Perceptually uniform color in a wide-gamut space.
• OKLCH Color Picker — Pick oklch values and see where they fall out of gamut.
• Color Mix — color-mix(), blending two colors in a chosen color space.
• Relative Colors — Deriving a new color from an existing one, in CSS.
• OKLCH in CSS — Why to leave rgb and hsl behind, with the theory made readable.
• Variable Fonts — One font file, every weight and width, through variation axes.
• Modern Font Stacks — System font stacks that need no web font download.
• Contrast Checker — Check a foreground and background pair against WCAG ratios.

Animation and motion

• Transitions — Animating a property between two states.
• Keyframe Animations — @keyframes, timing functions, and the animation shorthand.
• Scroll-Driven Animations — Timelines driven by scroll position instead of by the clock.
• Scroll-Driven Demos — Gallery of scroll and view timeline effects, with source.
• View Transitions API — Animated transitions between DOM states and across pages.
• Prefers Reduced Motion — Honouring the system setting that asks for less movement.
• CSS Animation — Animation principles for the Web.
• Motion — Animation library built on the browser’s own animation engine.

Architecture

• Tailwind CSS — Utility-first framework; v4 is configured in CSS, not JavaScript.
• CSS Modules — Class names scoped to a file, resolved at build time.
• Open Props — Design tokens shipped as plain custom properties.
• Style Dictionary — Build one token source into CSS, iOS, and Android output.
• CUBE CSS — Composition, utility, block, exception: a methodology that scales.
• BEM — Block element modifier naming, for codebases without components.
• Custom CSS Reset — Modern reset, with the reasoning for every rule.

Practice

• Flexbox Froggy — Game for learning CSS flexbox.
• Grid Garden — Game for learning CSS grid.
• CSS Diner — Game for learning CSS.
• CSSBattle — Code golf: reproduce a target image in as little CSS as possible.

Tools

• Specificity Calculator — Visual way to understand CSS specificity.
• Clippy — CSS clip-path maker.
• Animista — Create CSS animation.
• Shadow Palette Generator — Build layered box shadows that behave like real light.
• Cubic Bezier — Draw and preview a custom easing curve.
• Autoprefixer CSS — Autoprefixer CSS online.
• Lightning CSS — Parser, transformer, and minifier for modern CSS syntax.

Deep dives

• CSS-Tricks Guides — Long-form guides on layout, typography, and animation topics.
• Stacking Contexts — Why z-index sometimes does nothing at all.
• Breaking Up With CSS-in-JS — The runtime cost that turned the industry off runtime CSS-in-JS.