Sign in Get started

Free tutorial · 19 lessons

CSS Tutorial

Learn CSS step by step: selectors, colours, the box model, typography, units, flexbox, grid, positioning, responsive design, pseudo-classes, specificity, variables, dark mode and animations — with live previews you can edit.

Start learning →

CSS Basics

  1. CSS Introduction — What CSS is, how rules work and how it separates style from content.
  2. How to Add CSS — External stylesheets, style elements and inline styles — and which to use.
  3. CSS Selectors — Select elements by type, class, id, attribute, relationship and state.
  4. CSS Colors — Named colours, hex, rgb, hsl, opacity and modern colour functions.
  5. CSS Backgrounds and Borders — Background images and gradients, borders, rounded corners and shadows.
  6. CSS Box Model — Content, padding, border and margin — and box-sizing: border-box.
  7. CSS Text and Fonts — Fonts, sizes, weights, line height, alignment and web fonts.
  8. CSS Units — px, %, em, rem, vw, vh and clamp() — when to use which.
  9. CSS History & Versions — How Håkon Wium Lie proposed CSS in 1994, why there is no "CSS4", every milestone from CSS1 to today's modular CSS on one timeline, and the modern features (Grid, :has(), container queries, nesting) that changed how we style the web.

CSS Layout

  1. CSS Display — block, inline, inline-block, none — and the layout modes flex and grid.
  2. CSS Position — static, relative, absolute, fixed and sticky positioning, and z-index.
  3. CSS Flexbox — One-dimensional layouts: direction, alignment, wrapping, gap and flexible sizes.
  4. CSS Grid — Two-dimensional layouts with grid-template-columns, fr units, areas and auto-fit.
  5. CSS Responsive Design — Mobile-first media queries, the viewport meta tag, responsive images and container queries.

Beyond the Basics

  1. CSS Pseudo-classes and Pseudo-elements — :hover, :focus-visible, :nth-child, ::before, ::after and more.
  2. CSS Cascade and Specificity — How the browser decides which rule wins.
  3. CSS Variables and Dark Mode — Custom properties, theming and prefers-color-scheme.
  4. CSS Transitions and Animations — Smooth state changes with transition, keyframe animations and transforms.

Next Steps

  1. CSS Next Steps — Frameworks, methodologies and practice projects after the CSS basics.