CSS Foundations
6 lessonsAbout 36 minutesBeginner
This part of the CSS Tutorial runs from Cascade & Inheritance through to CSS Math Functions. There are 6 lessons here, and working through them takes about 36 minutes at a steady pace.
It follows on from CSS Introduction, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1Cascade & InheritanceUnderstand how the browser resolves competing declarations and which values pass from parent elements to their children. You will learn the exact order the browser follows, how inherited values fill unresolved properties, and how to trace a declaration without guessing.
- 2CSS SpecificityRead selector weight correctly, avoid specificity battles, and know when source order breaks a tie. The lesson explains selector weight, special selector functions, tie-breaking by source order, and why !important is rarely the right first fix.
- 3CSS UnitsChoose lengths, percentages, angles, times, and resolution units according to what the value should respond to. It covers fixed, font-relative, viewport, container, percentage, time, angle, and resolution values with guidance on choosing the right relationship.
- 4Box SizingControl how padding and borders participate in declared sizes and prevent accidental overflow. You will see how content-box and border-box calculate dimensions, why controls overflow, and how minimum sizes affect Flexbox and Grid children.
- 5CSS VariablesDefine reusable values that participate in the cascade and can change across components, themes, and media conditions. The examples show global tokens, component-level overrides, fallbacks, inheritance, and typed properties registered with @property.
- 6CSS Math FunctionsBuild fluid dimensions and dependable constraints by combining calc(), min(), max(), and clamp() with relative CSS units. It shows how calc(), min(), max(), and clamp() express fluid relationships while preserving readable minimum and maximum limits.