CSS: free course

Style your pages: colours, fonts, spacing, the box model, Flexbox, Grid and mobile-friendly layouts.

21 lessons · free · no account needed · code examples, practice questions and videos

Start lesson 1 Open the interactive course Printable course notes

Lessons

1. 1 CSS introduction: what it is, why we need it, who uses it and how it works
2. 2 Selectors and colours: targeting exactly the right elements and colouring them well
3. 3 Fonts and text styling
4. 4 CSS units: px, %, em, rem, vw, vh and ch
5. 5 Backgrounds, borders, rounded corners and shadows
6. 6 The box model: content, padding, border, margin and box-sizing
7. 7 display, visibility and overflow
8. 8 Pseudo-classes and pseudo-elements (:hover, ::before)
9. 9 The cascade, specificity and inheritance
10. 10 Debugging CSS with browser DevTools: find and fix any layout problem
11. 11 Organising CSS for real projects: naming (BEM), file structure, reuse and performance
12. 12 Flexbox layout: rows, columns, alignment, wrapping and real layouts
13. 13 Responsive design: one website for phones, tablets and computers
14. 14 CSS Grid layout: rows and columns, areas, auto-fit galleries and full page layouts
15. 15 Positioning and z-index: relative, absolute, fixed, sticky and stacking
16. 16 Transforms, filters and object-fit
17. 17 Transitions and animations: smooth hover effects, keyframes and motion done right
18. 18 Styling forms and buttons: inputs, focus states, errors and mobile-friendly forms
19. 19 CSS variables (custom properties) and dark mode: themes that are easy to change
20. 20 CSS frameworks: Bootstrap and Tailwind CSS, when to use them and how they work
21. 21 Project: a complete responsive business page