CSS Learning Roadmap
A complete CSS learning path covering all 35 topics — from selectors and the cascade to advanced responsive layouts, container queries, scroll snap, and critical CSS. Each stage builds on the previous.
info
Lay the groundwork with selectors, the cascade, the box model, and display types.
What CSS is, how to include it in HTML, syntax basics, and your first stylesheet.
Type, class, ID, attribute, pseudo-class, pseudo-element selectors, and descendant, child, sibling combinators.
How the cascade resolves conflicting rules, specificity scoring, source order, and !important.
Which properties are inherited, how the inherit/initial/unset/revert keywords work, and controlling the flow.
Content, padding, border, margin areas; box-sizing; block vs inline dimensions; collapsed margins.
block, inline, inline-block, none, table, flow-root, and the newer display: contents.
Control size, space, color, and surface treatments for any element.
width, height, min-/max- constraints, intrinsic sizing (min-content, max-content, fit-content), and aspect-ratio.
Shorthand rules, auto margins for centering, logical properties, negative margin gotchas.
Border width/style/color, shorthand, border-radius, outline vs border, and outline-offset.
Named colors, hex, rgb/hsl, modern color spaces (oklch, oklab, display-p3), and color functions.
background-color, image, repeat, position, size, attachment, and stacking multiple backgrounds.
linear-gradient, radial-gradient, conic-gradient, repeating variants, color-stop syntax, and browser quirks.
box-shadow layering, spread/blur, inset shadows, drop-shadow filter, and text-shadow.
Polish text rendering, load custom fonts, and harness the power of CSS custom properties.
font-family stacks, font-size units (rem, em, vw, clamp), font-weight, line-height, and font shorthand.
text-align, text-transform, text-decoration, text-indent, letter-spacing, word-spacing, white-space, overflow wrapping.
Loading custom fonts with @font-face, format hints (woff2), font-display, variable fonts, and performance.
Custom property definition, scoping, fallback values, dynamic theming with var(), and runtime manipulation.
Build complex layouts with Flexbox, Grid, positioning, and stacking contexts.
Main/cross axis, flex-direction, wrap, grow/shrink/basis, alignment (justify-content, align-items), and gap.
Grid container, explicit/implicit tracks, named lines and areas, fr units, minmax, auto-fill/auto-fit, and subgrid.
static, relative, absolute, fixed, sticky; containing blocks; offset properties; sticky edge cases.
Stacking contexts, when z-index works, isolation, stacking in 3D transforms, and common footguns.
Bring interfaces to life with transforms, transitions, animations, and visual filters.
translate, rotate, scale, skew, transform-origin, 3D transforms, perspective, and transform-style.
transition-property, timing functions (cubic-bezier), duration, delay, and transitioning auto dimensions.
@keyframes, animation-name/duration/timing-fill-direction, animation-composition, and performance best practices.
blur, brightness, contrast, saturate, hue-rotate, drop-shadow, backdrop-filter, and mix-blend-mode.
clip-path (polygon, circle, url), shape-outside, mask-image, masking layers, and browser support.
Build production-grade, maintainable CSS that works everywhere — from print to critical path.
@media rules, logical operators, feature queries (width, prefers-color-scheme, prefers-reduced-motion), and breakpoint strategy.
container-type, container-name, @container queries, container query length units (cqw/cqh), and use cases.
Fluid grids, responsive images (srcset, picture), viewport meta tag, mobile-first approach, and em/rem strategy.
calc(), min(), max(), clamp(), minmax(), env(), attr(), and trigonometric functions (sin, cos, tan).
scroll-snap-type, scroll-snap-align, scroll-snap-stop, and building carousels and sectioned scrollers.
Naming conventions, BEM, SMACSS, ITCSS, organizing stylesheets, file structure, and scalability patterns.
Locally scoped class names, composition, global overrides, and integrating with component frameworks.
@page rules, page-break properties, hiding/non-printing elements, and creating print-friendly layouts.
Above-the-fold extraction, inlining critical styles, deferring non-critical, and performance budgets.
Component-level styling with CSS-in-JS, utility-first frameworks, and CSS container queries.
Scoped class names, composition, global exceptions, and build integration with Vite/Webpack.
Tagged template literals, dynamic styling, theming, SSR support, and runtime vs zero-runtime trade-offs.
Utility-first workflow, configuration, custom design tokens, JIT compilation, responsive variants, and component extraction.
@container rules, container units, containment, and building truly container-responsive components.
Native CSS nesting, @layer cascade control, specificity management, and the future of CSS architecture.