HTML/CSS Interview Questions
12 HTML/CSS interview questions with worked answers, complexity notes, and runnable code you can edit in the browser — ordered easy to hard so you build up steadily. Free, no signup. Open any question for the full answer.
What HTML and CSS interviews are really testing
The questions look like trivia — center a div, explain specificity, when do you use flexbox versus grid — but the interviewer is reading for one thing: do you reason about layout from the rules, or do you guess and nudge until it looks right? Everything below traces back to a small set of models. The box model decides how width, padding, and border add up. Normal flow decides where boxes go before you touch position or flex. The cascade and specificity decide which rule wins when two conflict. Stacking contexts decide what sits on top of what. Learn those four and most “how do I…” questions answer themselves.
Layout is the deep end. Flexbox is one-dimensional — content laid along a single axis, sized by its contents; grid is two-dimensional — you define the tracks and place items into them. Reach for flex when the layout follows the content, and grid when the content follows the layout. Centering, the interview cliché, is really a question about which containing block you are centering within and which axis you mean.
Responsiveness rewards restraint: fluid units, sensible breakpoints, and min(), max(), and clamp() beat a wall of media queries. Accessibility is not a separate topic — semantic markup, visible focus, and sufficient contrast are the difference between a demo and a shippable component. The questions here move from those foundations up through the ones that trip seniors: z-index bugs that are really stacking-context bugs, collapsing margins, and the layout thrash that quietly costs you frames.
Easy
- Why semantic HTML? Document Structure
Rebuild a page of s using semantic elements. Which elements, and what do you gain? - The box model & box-sizing Box Model
What are the four box-model layers? What does box-sizing: border-box change, and why is it the default people reach for? - Pseudo-classes vs pseudo-elements Selectors
What's the difference between :hover and ::before? When do you use each, and what's with the colons?
Medium
- Specificity and the cascade Cascade & Specificity
Two rules set the same property on one element. How does the browser decide the winner? - px vs em vs rem vs % vs viewport units Values & Units
Compare absolute and relative length units. When do you reach for rem over em, and what does % resolve against? - Flexbox: centering and a nav bar Flexbox
Center a box both axes with flexbox. Then lay out a nav with a logo on the left and links on the right. - CSS Grid: a responsive card layout CSS Grid
Build a card grid that fits as many columns as the width allows, with no media queries. How does auto-fit + minmax work? - Mobile-first & media queries Responsive Design
What does 'mobile-first' mean in CSS, and why write min-width queries rather than max-width? - CSS custom properties & theming Custom Properties
How do CSS variables differ from Sass variables? Use them to implement a light/dark theme. - Transitions & transforms Animation
Animate a hover effect smoothly. Which properties are cheap to animate and which cause jank? - Inheritance & inherit / initial / unset Inheritance
Which properties inherit and which don't? Explain the inherit, initial, unset, and revert keywords.
Hard
- Positioning, stacking context & z-index Positioning
Explain the position values. Then explain why a higher z-index sometimes still renders BEHIND a lower one.
Other topics
Browser · JavaScript · TypeScript · React · System Design · Accessibility · Web Performance · Testing · Networking/Security · DSA