CSS Interview Prep
CSS interview questions tend to come from the same handful of topics. Learn these and you'll handle 80% of what gets asked.
The questions you'll hear most
| Question | Topic to revise |
|---|---|
| Explain the box model. | Box model + box-sizing |
Difference between inline, block, inline-block. | display |
| What is specificity? How do you calculate it? | specificity |
| Centre a div horizontally and vertically. | align / grid place-items |
| Flexbox vs Grid — when to use each. | flexbox + grid |
| What is a stacking context? | z-index |
How does position: sticky work? | position |
| What are CSS custom properties? How do they differ from SASS vars? | variables + SASS |
| How do media queries work? Mobile-first vs desktop-first. | media queries |
When is !important acceptable? | !important |
| Performance: which properties are cheap to animate? | transforms + transitions |
Interview habits
- Talk through your code — interviewers listen for reasoning, not just correctness.
- Sketch on the whiteboard or share a CodePen. Visualising specificity is much easier.
- Mention browser support trade-offs when you reach for newer features.
- If you don't know, say so — then explain how you'd find out.
Tip: Practice live-coding small components (button, card, modal) in 5 minutes each. Interviewers reuse these prompts constantly.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Interview Prep</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
A classic interview question is "Explain the…"
Answer:
model
Four corners with padding, border, margin.
Discussion
Loading…