Extra Credit
Official docs outline
20 sections- Syntax and selectors
Rule syntax, type/class/ID/attribute selectors, combinators, pseudo-classes and pseudo-elements.
- The cascade
Origin and importance, specificity, source order, @layer and scope.
- Specificity
How selector weight resolves conflicts.
- Inheritance and value processing
Inherited vs non-inherited properties, initial, inherit, unset and revert.
- Values and units
Lengths (px, rem, em, vh), percentages, calc(), math functions and value definition syntax.
- Colors
Color notations (hex, rgb, hsl, oklch), color-mix and transparency.
- Box model
Content, padding, border, margin, box-sizing and margin collapsing.
- Display and normal flow
Block and inline formatting, display values and the flow layout.
- Positioning and stacking
position: relative/absolute/fixed/sticky, z-index and stacking contexts.
- Flexbox
Flex containers and items, main/cross axis, grow/shrink/basis, alignment and wrapping.
- Grid layout
Tracks, template areas, fr units, auto-placement, subgrid and alignment.
- Logical properties and writing modes
Inline/block flow-relative properties and writing-mode.
- Custom properties
--variables, var(), fallbacks, @property and theming.
- Fonts and text
font-family, @font-face, variable fonts, line-height and text properties.
- Media queries and responsive design
@media, viewport units, prefers-color-scheme, prefers-reduced-motion and mobile-first design.
- Container queries
@container, container-type and component-level responsiveness.
- Transitions and animations
transition, @keyframes, timing functions, scroll-driven animation and performance.
- Transforms
translate, rotate, scale, 3D transforms and perspective.
- Nesting and modern selectors
Native nesting, :is(), :where(), :has() and relative selectors.
- Overflow and scroll behaviour
overflow, scroll snap, sticky and scroll containers.
Each section links to the official page. Titles and summaries by Extra Credit; the docs belong to their authors.
