CSS Course

CSS controls how web pages look: colours, fonts, spacing, layout, animation and how a design adapts from a phone to a wide monitor. This course starts with your first rule and goes all the way to modern features like container queries, cascade layers, nesting and :has() — finishing with a complete, responsive landing page.

What you'll learn

The course has 50 lessons in six parts:

  • Getting Started — how CSS is attached, rule syntax, every kind of selector, pseudo-classes and pseudo-elements, the cascade, specificity and inheritance.
  • Values & Colour — units, colour formats including oklch(), backgrounds, gradients, custom properties and functions like calc() and clamp().
  • Boxes & Text — the box model, borders, overflow, shadows, typography, web fonts, and styling lists and tables.
  • Layout — display, positioning, stacking, floats, Flexbox, Grid, alignment, media queries, container queries, logical properties and columns.
  • Visual Effects — transforms, transitions, keyframe and scroll-driven animations, filters, blend modes, clipping, masks and scrolling.
  • Modern CSS & Good Practice — modern selectors, nesting, cascade layers, @scope, dark mode, form styling, accessibility, architecture and a final project.

Every Try it yourself editor has two parts: the CSS you edit, and a small demo page that updates live as you type. All examples in the course have been checked with Stylelint and an HTML validator.

You should know basic HTML first — the HTML course covers everything you need.

Practice

  • Playground — a blank CSS editor with a live demo page.
  • Exercises — fill-in-the-blank tasks and styling challenges with solutions.
  • Quiz — test your understanding across the whole course.
  • Syllabus & Study Plan — learning outcomes and a week-by-week schedule.

Lessons

Getting Started

  1. Introduction to CSS
  2. Adding CSS & Syntax
  3. Selectors
  4. Combinators & Attribute Selectors
  5. Pseudo-classes
  6. Pseudo-elements
  7. The Cascade & Specificity
  8. Inheritance & Default Values

Values & Colour

  1. Units & Sizing
  2. Colours
  3. Backgrounds
  4. Gradients
  5. CSS Variables (Custom Properties)
  6. CSS Functions: calc, min, max & clamp

Boxes & Text

  1. The Box Model
  2. Borders & Outlines
  3. box-sizing & Overflow
  4. Shadows & Rounded Corners
  5. Typography
  6. Web Fonts
  7. Styling Text
  8. Styling Lists & Tables

Layout

  1. Display & Visibility
  2. Positioning
  3. z-index & Stacking Contexts
  4. Floats & Wrapping Text
  5. Flexbox
  6. Sizing Flex Items
  7. CSS Grid
  8. Grid Placement & Template Areas
  9. Centring & Alignment
  10. Media Queries & Responsive Design
  11. Container Queries
  12. Logical Properties & Writing Modes
  13. Multi-column Layout

Visual Effects

  1. Transforms
  2. Transitions
  3. Animations
  4. Filters & Blend Modes
  5. clip-path & Masks
  6. object-fit & aspect-ratio
  7. Scrolling

Modern CSS & Good Practice

  1. Modern Selectors: :has, :is, :where & :not
  2. CSS Nesting
  3. Cascade Layers & @scope
  4. Dark Mode & Themes
  5. Styling Forms
  6. Accessible CSS
  7. CSS Architecture & Best Practices
  8. Project: A Landing Page

Practice

  1. CSS Playground
  2. CSS Exercises
  3. CSS Quiz
  4. Syllabus & Study Plan
Where to start: begin with Introduction and work through in order — layout makes much more sense once the box model and the cascade are clear. Afterwards, continue with the JavaScript course to make your pages interactive.