CSS School

Style web pages with CSS, with Swatch and Professor Curly. 4 levels and 12 lessons, from zero, free. Read the lessons here, or play them in the game, where your page updates as you type.

Start CSS School Or read Level 1 first

Level 1

Your first styles

3 lessons, then a level test

  1. Rules, properties and values What CSS is, and how a rule is written.
  2. Where CSS lives style elements, stylesheets and the style attribute.
  3. Colors Color names, hex codes, rgb and backgrounds.

Level 2

Selectors and text

3 lessons, then a level test

  1. Classes and ids Picking exactly the elements you want.
  2. Fonts and text Size, typeface, weight, alignment and spacing.
  3. The cascade When two rules disagree, who wins?

Level 3

The box model

3 lessons, then a level test

  1. Padding, border and margin Every element is a box. Here’s what it’s made of.
  2. Sizes and units width, height, px, %, rem and box-sizing.
  3. Block, inline and none How boxes flow, and how to hide one.

Level 4

Layout with Flexbox

3 lessons, then the final test

  1. Rows with Flexbox display: flex, gap and justify-content.
  2. Columns, centring and wrapping flex-direction, align-items and flex-wrap.
  3. Pages that work on phones max-width, media queries and responsive layouts.

Build your first styles today

CSS School is part of CurlyScript, the free game that teaches JavaScript. Your progress saves as you go.

Start learning