CSS Complete Course

Style and lay out modern websites, from your first rule to cascade layers, Grid and scroll-driven animation.

  • Beginner
  • 34 lessons
  • 16 hours

Start the course

CSS decides how every page on the web looks, from typography and colour to complete layouts. This course teaches modern CSS as browsers support it today, starting with your first rule and ending with techniques that professional teams use on large sites.

The early modules cover the foundations that explain almost every CSS bug: the cascade, specificity, the box model and units. You then build real layouts with Flexbox and Grid, add custom properties, fonts and motion, and finish with modern features such as cascade layers, :has(), nesting, subgrid, colour functions and view transitions.

Every lesson has small, complete examples and shows how to inspect and debug the result in your browser's developer tools.

Keep a practice folder with an index.html and a styles.css file open beside each lesson. Type the examples, then change values and watch what happens in DevTools.

Curriculum

  1. 1 Getting started

    What CSS is, how rules are written, and how the browser decides which rule wins.

    1. What is CSS? Adding styles to HTML 7 min
    2. CSS syntax: rules, selectors, properties and values 6 min
    3. Type, class and ID selectors 6 min
    4. The cascade, specificity and inheritance 6 min

  2. 2 Boxes, units and styling

    Colour, units, the box model, display types, typography, backgrounds and borders.

    1. Colours in CSS: hex, rgb, hsl and oklch 6 min
    2. CSS units: px, em, rem, %, vw and vh 7 min
    3. The box model: content, padding, border and margin 6 min
    4. box-sizing and controlling element size 6 min
    5. Display: block, inline and inline-block 6 min
    6. Text and font styling 7 min
    7. Backgrounds, borders and shadows 7 min

  3. 3 Flexbox and selectors

    One-dimensional layout with Flexbox, plus combinators, attribute selectors and pseudo-classes.

    1. Introduction to Flexbox 6 min
    2. Combinators and attribute selectors 6 min
    3. Pseudo-classes and pseudo-elements 7 min
    4. Flexbox in depth: alignment, wrapping and flex sizing 7 min

  4. 4 Grid and positioning

    Two-dimensional layout with Grid, choosing between Grid and Flexbox, positioning and stacking.

    1. Introduction to CSS Grid 7 min
    2. Grid template areas and named lines 7 min
    3. Flexbox or Grid? Choosing the right layout tool 7 min
    4. Positioning: relative, absolute, fixed and sticky 7 min
    5. Stacking context and z-index 7 min

  5. 5 Fonts, variables and motion

    Web fonts, custom properties, transitions, keyframe animations, transforms and scrolling.

    1. Web fonts: @font-face, font-display and variable fonts 8 min
    2. Custom properties (CSS variables) 7 min
    3. Transitions 6 min
    4. Keyframe animations and reduced motion 7 min
    5. Transforms: translate, scale and rotate 7 min
    6. Overflow and scrolling: overflow, scroll snap and smooth scrolling 8 min

  6. 6 Modern CSS and architecture

    Cascade layers, modern selectors, nesting, subgrid, colour functions and ways to organise CSS at scale.

    1. Cascade layers with @layer 8 min
    2. Modern selectors: :has(), :is() and :where() 7 min
    3. Native CSS nesting 7 min
    4. Subgrid and intrinsic grid layouts 8 min
    5. CSS architecture: BEM, utility-first and scoped styles 7 min
    6. Modern colour: color-mix(), relative colours and light-dark() 8 min

  7. 7 Performance and advanced animation

    How browsers render CSS, and view transitions and scroll-driven animations as progressive enhancements.

    1. How browsers render CSS: style, layout, paint and composite 8 min
    2. View transitions and scroll-driven animations 9 min

Test yourself: CSS Complete Course: final quiz

12 questions. Pass mark 70%.

  1. Question 1 of 12 Which is the standard way to add a site-wide stylesheet to every page?
  2. Question 2 of 12 This HTML is styled by the CSS below: <p class="intro" id="lead">Hello</p>. What colour is the paragraph?
    CSS
    #lead { color: red; }
.intro { color: green; }
p.intro { color: blue; }
  3. Question 3 of 12 Which of these properties are inherited by default?

    Select all that apply.

  4. Question 4 of 12 With the default box-sizing, what is the visible width of this box?
    CSS
    .box {
    width: 200px;
    padding: 10px;
    border: 5px solid;
    margin: 20px;
}
  5. Question 5 of 12 Why is rem usually preferred over em for font sizes?
  6. Question 6 of 12 Which declaration on a flex container centres its items horizontally when flex-direction is row?
  7. Question 7 of 12 What does flex: 1 expand to?
  8. Question 8 of 12 Which grid definition creates as many columns of at least 15rem as fit, sharing extra space equally?
  9. Question 9 of 12 A dropdown has z-index: 9999 but still appears behind the next section. Which are likely causes?

    Select all that apply.

  10. Question 10 of 12 What is the specificity of :where(#main .nav) a?
  11. Question 11 of 12 Which colour does a link inside #nav get?
    CSS
    @layer base, components;

@layer components {
    a { color: green; }
}

@layer base {
    #nav a { color: red; }
}
  12. Question 12 of 12 Which properties can usually be animated without triggering layout or paint?

    Select all that apply.