Learn CSS

A CSS rule is a selector plus declarations; attach styles with a linked stylesheet, a style element or inline styles.

Target elements by type, class, id and attribute, and by their position in the tree with descendant, child and sibling combinators.

Learn how the browser picks a winner when several rules set the same property, and which properties children inherit.

Write colours in hex, rgb, hsl and oklch, and choose between px, rem, em, %, vw and other units for sizes.

Style elements by state or position with pseudo-classes like :hover and :nth-child, and generate content with ::before and ::after.

Every element is a box of content, padding, border and margin; box-sizing decides whether width includes padding and border.

Style text with font-family stacks, size, weight, line-height and spacing, and load custom fonts efficiently with @font-face.

Decorate boxes with background colours, images and gradients, rounded borders, outlines and shadows.

Control box sizes with min/max constraints, min(), max(), clamp(), aspect-ratio and object-fit, and handle content that overflows.

Control how a box takes part in layout with display: block, inline, inline-block, none, and understand normal flow.

Lay items out in a row or column with flexbox, distributing space and aligning them with justify-content, align-items and gap.

Move boxes out of normal flow with relative, absolute, fixed and sticky positioning and the inset properties.

Build two-dimensional layouts with grid-template-columns, fr units, repeat, minmax, auto-fit and named areas.

Understand painting order, z-index and the stacking contexts that make a z-index: 9999 still appear behind something.

Define reusable values with --name and read them with var(), with cascading, inheritance and fallbacks, to build themes.

Group selectors with :is() and zero-specificity :where(), and select parents and earlier siblings with :has().

Write nested rules directly in CSS with & and nested at-rules, without a preprocessor.

Organise styles into @layer groups so whole layers win or lose regardless of specificity, taming resets, libraries and utilities.

Keep large stylesheets maintainable with naming conventions like BEM, component scoping, @scope, design tokens and utility classes.

Adapt layouts to screen size and user preferences with mobile-first media queries, range syntax and preference queries.

Make components respond to the size of their container rather than the viewport with container-type and @container.

Animate changes between states with transition, and run multi-step animations with @keyframes and the animation property.

Move, rotate, scale and skew elements visually with transform and the individual translate, rotate and scale properties.

Learn how block and inline formatting contexts work, when margins collapse, and how display: flow-root contains floats.

Follow how style, layout, paint and composite turn CSS into pixels, and use that to avoid jank, layout thrashing and costly selectors.

Use perceptual colour spaces, wide-gamut P3 colours, color-mix() and relative colour syntax to build palettes in pure CSS.

Master min-content, max-content and fit-content, how flex items grow and shrink, and why min-width: auto causes overflow.