Add CSS to an HTML page
Connect a stylesheet, select elements deliberately, and preserve meaningful HTML while changing presentation.
Open resourceLearning path
CSS foundations
Style meaningful HTML with responsive rules that preserve reflow.
Understand the cascade and inheritance
Predict which CSS declaration wins, trace inherited values, and structure layers so fixes do not depend on selector escalation.
Open resourceUnderstand the CSS box model
Control content, padding, borders, margins, intrinsic size, and overflow without relying on fixed dimensions or accidental layout.
Open resourceCSS selectors and specificity
Select elements by stable roles and resolve cascade conflicts without escalating to brittle selectors or unnecessary important declarations.
Open resourceBuild one-dimensional layouts with flexbox
Use flexbox for rows and columns whose items share one primary axis, while preserving source order, reflow, intrinsic sizing, and focus visibility.
Open resourceBuild two-dimensional layouts with CSS Grid
Use CSS Grid when rows and columns must coordinate, with explicit tracks, intrinsic minimums, responsive repetition, and meaningful source order.
Open resourceResponsive layout foundations
Build fluid layouts that reflow from narrow phones to wide screens without fixed-width assumptions or horizontal overflow.
Open resource