Learning path

CSS

The language for styling web pages: colours, layouts, Flexbox, Grid and responsive design.

Start with lesson 1

1

CSS Introduction

What CSS is, how a CSS rule is built from a selector and declarations, and why separating style from HTML makes websites easier to build and change.
3 min read
2

How to Add CSS

The three ways to add CSS (inline styles, internal style elements and external stylesheets), when to use each one, and which wins when they conflict.
4 min read
3

CSS Selectors

Element, class, id, group, descendant, child, attribute and pseudo-class selectors, plus specificity, the rule that decides which style wins.
5 min read
4

CSS Colors

Colour names, hex codes, rgb, hsl and transparency, how to pick a small colour palette, and how to check text contrast.
4 min read
5

CSS Backgrounds

Background colours, images, repeat, position, size, cover and contain, gradients and the background shorthand, with a hero banner example.
4 min read
6

CSS Borders

Border width, style and colour, single sides, the border shorthand, rounded corners with border-radius, circles, outlines and box shadows.
4 min read
7

CSS Margin and Padding

The difference between padding (space inside) and margin (space outside), the one-to-four value shorthand, centring with auto, and collapsing margins.
4 min read
8

CSS Box Model

Every element is a box of content, padding, border and margin. Learn how its size is calculated, why box-sizing border-box makes life easier, and how to inspect boxes.
4 min read
9

CSS Width and Height

Set sizes with px, %, rem, vw and vh, use max-width and min-height for flexible layouts, and control overflowing content.
4 min read
10

CSS Text and Fonts

Font families and fallbacks, web fonts, size, weight and line height, alignment, decoration, transform and spacing, plus rules for readable text.
4 min read
11

CSS Display

How the display property controls layout: block, inline, inline-block, none, flex and grid, plus hiding elements correctly with display none and visibility.
4 min read
12

CSS Position

Static, relative, absolute, fixed and sticky positioning explained with badges, overlays, sticky headers and back-to-top buttons, plus z-index stacking.
4 min read
13

CSS Flexbox Basics

Lay out items in a row or column with Flexbox: flex containers, direction, justify-content, align-items, gap and wrapping, with a visual example of each.
6 min read
14

CSS Flexbox Layouts

Control flex items with flex-grow, flex-shrink, flex-basis and the flex shorthand, then build a sidebar layout, equal cards, a sticky footer and a media object.
5 min read
15

CSS Grid Basics

Build two-dimensional layouts with CSS Grid: grid containers, columns and rows, the fr unit, repeat(), gap, and placing items across several cells.
5 min read
16

CSS Grid Layouts

Build full page layouts with grid-template-areas, make responsive card grids with auto-fit and minmax(), and combine Grid with Flexbox.
5 min read
17

CSS Responsive Design and Media Queries

Make pages work on every screen: the viewport meta tag, mobile-first CSS, media queries and breakpoints, fluid type with clamp(), and testing on real sizes.
5 min read
18

CSS Transitions and Transforms

Animate changes smoothly with transition, move, scale and rotate elements with transform, choose easing, and add simple keyframe animations responsibly.
4 min read
19

CSS Variables

Store colours, spacing and fonts in custom properties, use var() with fallbacks, build a dark mode, and organise a stylesheet around design tokens.
4 min read
20

CSS Project: Style Your Profile Page

Turn the plain HTML profile page into a modern, responsive design with variables, Flexbox, Grid, cards, a dark mode and smooth transitions.
5 min read