CSS Foundations

From bytes to pixels: how browsers parse CSS into the CSSOM, how the cascade algorithm resolves conflicts, and the difference between computed, used, and resolved values.

The complete specificity calculation algorithm, from simple selectors through :where() zero-specificity, :is() specificity forwarding, and the practical strategies for winning specificity battles without !important.

Every element is a box: content, padding, border, margin. content-box vs border-box, the complete margin collapse rules, and the edge cases where margins don't collapse.

When to use px, rem, em, vh, vw — and why the wrong choice creates accessibility failures. Plus the oklch color space and why it's the future of CSS color.

font-display strategies, FOUT vs FOIT, the size-adjust trick that eliminates layout shift, variable fonts for performance, and the typography system that makes content readable at every size.

Multiple backgrounds and stacking order, gradient tricks for real production UI, border-image, box-shadow performance implications, and when to use filter vs box-shadow.

Block, inline, inline-block, flex, grid — the display modes that control how elements participate in layout. Plus static, relative, absolute, fixed, and sticky positioning and how they interact with stacking contexts.

overflow-x vs overflow-y and their interaction, clip vs scroll vs auto, the three ways to hide elements (visibility, display, opacity) and when each is correct for accessibility.

The modern pseudo-class toolkit: :has() the parent selector, :is() for grouping, :where() for zero-specificity, :not() for exclusion. Plus ::before/::after for generated content.

Custom properties (CSS variables) inheritance, scoping, runtime vs compile-time differences from Sass variables, and building a complete theming system with dynamic switching.

6 tricky 'which rule wins?' questions that test your understanding of the cascade algorithm, specificity calculation, :where() zero specificity, and !important interactions.