CSS Tutorial
Turn structured content into readable, responsive pages. Learn how the cascade chooses a value, how boxes take up space, and how modern layouts adapt to real content.
Learn by changing one thing
Read the explanation, inspect the markup and stylesheet, then select Try in playground. Predict what will change before you edit a value. Challenges let you rebuild a technique and compare a possible solution.
Course chapters
Getting started
12 lessons and practice pages
Colour and surfaces
11 lessons and practice pages
Borders and the box model
24 lessons and practice pages
Text and typography
26 lessons and practice pages
Tables and everyday layout
6 lessons and practice pages
Layout and positioning
26 lessons and practice pages
Selectors and interactive states
13 lessons and practice pages
Visual effects
45 lessons and practice pages
Components and forms
21 lessons and practice pages
Units and the cascade
17 lessons and practice pages
Images and component patterns
42 lessons and practice pages
Responsive design
17 lessons and practice pages
Flexbox
10 lessons and practice pages
Grid
16 lessons and practice pages
Projects and practice
11 lessons and practice pages
Choose the right place to test
The browser playground loads both example fields and provides a static CSS preview. External assets, form interaction, browser-page changes, and JavaScript-dependent behaviour need your own local document. Use developer tools to inspect the computed values and test the result at more than one width.