CSS

Descendant, child and sibling combinators, and selecting by attribute value.

Nest rules in plain CSS, the & selector, nesting media queries, and differences from Sass.

Style states like :hover, :focus-visible and :checked, positions like :nth-child, and generated content with ::before and ::after.

Align nested content to a parent grid with subgrid, and size tracks with min-content, max-content and fit-content.

justify-content, align-items, wrapping, and how flex-grow, flex-shrink and flex-basis share space.

How teams keep CSS maintainable: naming conventions, utility classes, component scoping and when each fits.

Two-dimensional layout with grid-template-columns, rows, the fr unit, gap and placing items.

Build palettes and dark mode from a few tokens with color-mix(), relative colour syntax and light-dark().

Describe page layouts visually with grid-template-areas, and rearrange them at different widths.

The rendering pipeline, what triggers layout and paint, and using DevTools to find slow styles.

A practical comparison with examples of components and pages that suit each, and how they combine.

Animate between page states with the View Transitions API and link animations to scroll position without JavaScript.

How each position value works, containing blocks, and sticky headers and sidebars.

Why z-index sometimes does nothing: stacking contexts, what creates them, and how to debug layering.

Load custom fonts, avoid invisible text with font-display, self-host versus Google Fonts, and variable font axes.

Define and use custom properties, scope and inheritance, fallbacks, and theming with tokens.

Animate state changes smoothly with transition, timing functions, and properties that animate cheaply.

Build multi-step animations with @keyframes, control them with animation properties, and respect prefers-reduced-motion.

Move, scale and rotate elements with transforms, the individual transform properties, and transform-origin.

Font families and fallbacks, size, weight, line height, letter spacing and text alignment for readable text.