CSS

CSS Tutorial

Style and lay out pages – colours, the box model, flexbox, grid and responsive design.

Start lesson 1 Take the quiz Cheat sheet
12 lessons

CSS controls how your HTML looks: colours, fonts, spacing and layout. This track takes you from your first rule to modern layouts with flexbox and grid, responsive design with media queries, animations and CSS variables.

Knowing basic HTML first helps – the HTML tutorial covers it.

  1. 1 CSS IntroductionLearn what CSS is, how a CSS rule is written and the three ways to add styles to an HTML…
  2. 2 CSS SelectorsTarget exactly the elements you want with type, class, ID, attribute, combinator and pseudo-class selectors, and understand specificity.
  3. 3 CSS Colors and BackgroundsUse named, hex, rgb(), hsl() and oklch() colours, add transparency, and style backgrounds with images and gradients.
  4. 4 CSS Box ModelEvery element is a box made of content, padding, border and margin. Learn how they add up and why box-sizing:…
  5. 5 CSS Text and FontsStyle readable text with font-family stacks, font-size, weight, line-height, alignment and spacing, plus loading web fonts with @font-face.
  6. 6 CSS Display and PositionLearn how display controls block and inline boxes, and how relative, absolute, fixed and sticky positioning move elements around.
  7. 7 CSS FlexboxLay out items in a row or column with Flexbox: direction, justify-content, align-items, gap, wrapping and flexible sizing.
  8. 8 CSS GridBuild two-dimensional layouts with CSS Grid: columns, rows, the fr unit, repeat(), minmax(), auto-fit, spanning and named areas.
  9. 9 CSS Responsive DesignMake pages work on every screen with the viewport meta tag, mobile-first media queries, fluid images and container queries.
  10. 10 CSS UnitsUnderstand px, rem, em, %, ch and viewport units like vw and dvh, and create fluid sizes with min(), max()…
  11. 11 CSS Transitions and AnimationsAdd smooth hover effects with transitions, build keyframe animations, keep them fast with transform and opacity, and respect reduced motion.
  12. 12 CSS Variables (Custom Properties)Store colours, spacing and other values in CSS custom properties, use var() with fallbacks, build themes and dark mode, and…