Selectors & the box model
26 steps in 7 sets of CSS.
Selectors and the box model, which is to say the two things everything else in CSS depends on. Then the cascade, color and type, boxes, units, and styling text content.
Twenty-six steps, every one of them checked against Chromium's own CSS parser. If a property or value in here were invalid, the test suite would have said so.
Selectors
- Element selectorsRules keyed to element names, plus the grouping and universal forms.
- Classes and idsClasses are for styling, ids for anchors and labels — their weights differ.
- CombinatorsDescendant, child, adjacent and general sibling: four ways to relate elements.
- Attribute selectorsMatching on an attribute's presence or the shape of its value.
- Pseudo-classesState selectors: hover, focus, disabled, and the structural ones.
- Structural selectorsSelecting by position: every other row, the first few, the last one.
The cascade
- SpecificityWhen two rules set the same property, the more specific selector wins — and the count is not close.
- inherit, initial, unset, revertFour keywords that say where a value should come from instead of naming one.
- Layers decide before specificity doesA layer's order beats every selector inside it, which is how you keep a reset from fighting a component.
Color & type
- ColorHex, rgb, hsl and the modern relative forms, plus transparency.
- Color in a wider gamutoklch is lightness, chroma and hue, so a palette is one number changing at a time.
- TypographyFamily, size, weight and the spacing that makes text readable.
- Styling textAlignment, case, decoration and how long lines are handled.
Boxes
- The box modelContent, padding, border and margin — and why border-box is kinder.
- Making width mean widthBy default width is the content only, and every border you add makes the box bigger.
- Borders, radius and outlinesEdges: border styles, rounded corners, and outlines that do not shift layout.
- BackgroundsColor, images, gradients and the way a background is sized and placed.
- Display and sizingHow a box participates in layout, and the sizes that constrain it.
- Overflow and scrollingWhat happens when content is bigger than its box.
Values & units
- Which unit to reach forAbsolute units ignore the reader; relative ones do not.
- calc and unitsMixing units in one expression, and the units worth reaching for.
- Logical propertiesBlock and inline instead of top and left, so a layout survives being translated.
Styling content
- Styling listsMarkers are their own little box now, addressable without a pseudo-element hack.
- Styling a tableTwo properties do most of the work, and both of them are on the table itself.
- Cursors, selection and pointer eventsThe small properties that decide how a surface feels under the mouse.
Encore
- base_styles.cssA complete base stylesheet: reset, tokens, typography and form defaults.