CSS layout and styling interview guide

Build a mental model, not a property list

CSS exams punish memorization without models. If you can sketch the box model and the flex main/cross axes, you can derive many answers. If you only remember property names, trap options will look equally plausible.

Start every layout question by asking: Is this normal flow, flex, grid, or out-of-flow positioning? That one classification eliminates half the wrong answers.

High-yield topics

Box model and box-sizing: content-box vs border-box changes how width interacts with padding and border. Specificity and cascade: inline, IDs, classes, elements — and why !important is a last resort. Units: rem for scalable spacing, em that compounds with parent font-size, px that stays fixed.

Flexbox: flex-direction sets the main axis; justify-content vs align-items is the classic mix-up. Grid: fr tracks, template areas, and gap. Positioning: relative as offset, absolute against positioned ancestor, fixed against the viewport, sticky with a threshold such as top: 0.

Stacking contexts explain many “why is this z-index ignored?” questions. A positioned ancestor with z-index can create a new context so children cannot escape it visually the way people expect.

Responsive and motion questions

Mobile-first media queries use min-width to layer enhancements upward. Know the difference between transition (reacts to property changes) and animation (timeline via keyframes). Prefer testing your understanding with timed quizzes — under a clock, people confuse justify and align more than they expect.

Practice path

On frontendprep, clear CSS Beginner for selectors and box model, Intermediate for flex/grid/responsive patterns, and Advanced for specificity and stacking traps. When you miss a layout question, redraw the axes once before the next attempt.