CSS basics
Selectors, color, spacing, typography, borders, and reusable classes.
What you will practice
Element selectors; Class selectors; Color tokens; Readable typography.
Use the worked examples when needed, then test your understanding without them.
- 01CSS basics: Element selectorsAn element selector applies declarations to every matching element in its scope.Practice
- 02CSS basics: Class selectorsA class selector targets an intentional reusable hook rather than every element of a type.Practice
- 03CSS basics: Color tokensCustom properties centralize reusable values; var() reads a token and can provide a fallback.Practice
- 04CSS basics: Readable typographyFont size, line height, and line length work together. Line height without a unit scales with the text.Practice
- 05CSS basics: Spacing with paddingPadding creates space inside the border; it does not separate the element from its neighbors.Practice
- 06CSS basics: Spacing with marginMargin creates space outside an element. Block margins can collapse in normal flow.Practice
- 07CSS basics: BordersA visible border needs a style as well as a width and color; it participates in box sizing.Practice
- 08CSS basics: Background surfacesA background should keep foreground content readable rather than carry meaning alone.Practice
- 09CSS basics: Reusable utility classesSmall utility classes should have a predictable job and avoid accidental changes to unrelated components.Practice
- 10CSS basics: Hover statesHover is one interaction state, not the only indication that a control can be used.Practice
- 11CSS basics: Focus-visible statesKeyboard focus needs a visible indicator. focus-visible can provide one without relying on hover.Practice
- 12CSS basics: Cascade reviewWith equal origin, importance, layer, and specificity, a later declaration wins for the same property.Practice