Tutorial Series // CSS

The Complete CSS Tutorial

Layout and design that holds up — flexbox, grid, responsive design, animations, and modern CSS. Every topic ships working code.

14 topics ~134 min total read 100% free
  1. 01 Introduction to CSS — Syntax & Selectors How CSS attaches to HTML, the rule syntax, and the selectors you'll use every day. 8 min →
  2. 02 The Cascade, Specificity & Inheritance Why some rules win over others — source order, specificity scoring, inheritance, and why !important is a last resort. 9 min →
  3. 03 The Box Model — Margin, Padding, Border Every element is a box — content, padding, border, margin, box-sizing, and margin collapsing explained. 9 min →
  4. 04 Colors, Units & Typography Hex/rgb/hsl/oklch, px vs rem vs em vs %, viewport units, web fonts, and the font properties that define your design. 10 min →
  5. 05 Display & Positioning block vs inline, position relative/absolute/fixed/sticky, z-index and stacking — the layout fundamentals. 10 min →
  6. 06 Flexbox — One-Dimensional Layout Main axis, justify vs align, gap, grow/shrink/basis, wrapping — and the handful of patterns that cover 90% of layouts. 11 min →
  7. 07 CSS Grid — Two-Dimensional Layout Template columns, fr units, the auto-fit/minmax responsive gallery, placing items, and grid-template-areas. 11 min →
  8. 08 Responsive Design & Media Queries Mobile-first breakpoints, the viewport meta tag, fluid sizing with clamp(), responsive images, and testing. 10 min →
  9. 09 Pseudo-Classes & Pseudo-Elements :hover, :focus-visible, :nth-child, ::before/::after, form states, and the modern :is/:where/:has selectors. 9 min →
  10. 10 Transitions & Animations Smooth state changes with transition, multi-step motion with @keyframes, easing, and what to animate for 60fps. 10 min →
  11. 11 Transforms, Shadows & Visual Effects translate/scale/rotate, layered box-shadows, gradients, filters, backdrop blur, and clip-path. 9 min →
  12. 12 Custom Properties (CSS Variables) Define design tokens once with --variables, build a theme system with dark mode, and compute values with calc(). 9 min →
  13. 13 Modern CSS — Container Queries, Nesting & :has() The newest layer of CSS that's already in every browser — container queries, native nesting, logical properties, and more. 9 min →
  14. 14 CSS Architecture & Best Practices Naming with BEM, utility classes, file organisation, layers, accessibility, and a production checklist. 10 min →