CSS Interview Questions and Answers
CSS is tested more than React-only candidates expect. Here are the questions that come up and how to answer them well.
What is the box model and box-sizing?
Every element is content + padding + border + margin. By default width sets only content; border-box makes width include padding and border. Apply box-sizing: border-box globally — the most useful reset.
Flexbox vs Grid?
Flexbox is one-dimensional (a row or column); Grid is two-dimensional (rows and columns at once). Flexbox for navbars/toolbars, Grid for page layouts and card galleries.
How does specificity work?
Think (inline, ids, classes, elements). Compare left to right; the first column that differs wins. Keep specificity low and flat (single classes); avoid !important, which signals a specificity problem.
Explain position values.
static (default), relative (offset without leaving flow, a positioning context), absolute (relative to nearest positioned ancestor), fixed (relative to viewport), sticky (relative until a scroll threshold, then fixed).
Why doesn't my z-index work?
z-index only works within the same stacking context and on positioned/flex elements. transform, opacity < 1 and filter create new stacking contexts a child can't escape — the cause of most z-index bugs.
How do you center a div?
Flexbox: display:flex; justify-content:center; align-items:center. Grid: display:grid; place-items:center — the shortest way.
Master HTML & CSS for interviews
The box model, Flexbox, Grid, responsive and modern CSS — the HTML & CSS Handbook is in the Complete Frontend Kit.
⚡ Get the Complete Frontend Kit → ₹499Frequently asked questions
- Is CSS important for frontend interviews?
- Yes — layout, responsiveness, specificity and accessibility come up regularly. Neglecting CSS costs easy points.
- What CSS depth do I need?
- Solid Flexbox and Grid, the box model, specificity, positioning, responsive techniques and accessibility basics.