CSS interviews check whether you can explain the box model, why a rule lost, and when to use Flexbox versus Grid. Be ready to talk specificity, stacking contexts, em vs rem, and mobile-first media queries. Sketch a layout in CSS, not only in a framework class list.
This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- Box model: Content + padding + border (+ margin outside).
border-boxincludes padding/border in width. - Specificity: ID beats class beats element. Layers and source order break ties.
- BFC: Block formatting context (e.g.
overflow: auto,display: flow-root) contains floats and margins. - Flex vs Grid: 1D vs 2D. Say it, then give a nav vs a dashboard example.
- em vs rem:
emis relative to parent font-size;remto the root. Media queries often userem. - Sticky: Needs inset, scrolling ancestor, and no overflow trap.
- z-index: Only in a stacking context. Transforms create new ones.
- Critical CSS: Above-the-fold CSS inlined or prioritized; the rest deferred. Not “put everything in head.”
Copy-paste examples
Whiteboard centering
Interviewers still ask to center a box. Grid or Flex both work; know both.
.hero {
min-height: 100svh;
display: grid;
place-items: center;
}Common mistakes
- Answering “Flexbox or Grid?” with only a framework name.
- Saying
!importantis how you win specificity fights. - Confusing margin collapsing with Flex/Grid gap (gap does not collapse).
- Ignoring accessibility: color contrast, focus, motion.
FAQ
- How do you debug a CSS bug in an interview? Reproduce, inspect computed styles, check specificity and inherited vs author, then layout (flex/grid/position). Speak while you inspect.
- What is the cascade in one sentence? Origin, importance, layers, specificity, then source order decide which declaration applies.
- px or rem for type?
rem(and a sensible root) so user font-size settings work.pxfor hairline borders is fine.
Related CSS cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.