HTML and CSS look easy and trip people up in interviews, because the questions probe the parts people fuzzily "kind of know" — the box model, the difference between flexbox and grid, positioning, and specificity. Solid answers here signal a real frontend engineer. Here are the HTML and CSS interview questions that actually get asked, with answers. (See also our frontend guide.)
CSS box model & layout
- Explain the box model — content, padding, border, margin.
box-sizing: content-boxvsborder-box.- Flexbox vs Grid — when to use each.
- position — static, relative, absolute, fixed, sticky.
- Margin collapsing.
Specificity & the cascade
- How does CSS specificity work?
- The cascade and inheritance.
- What does
!importantdo, and why avoid it? - Pseudo-classes vs pseudo-elements.
HTML & responsive design
- What is semantic HTML and why does it matter?
- Block vs inline vs inline-block elements.
- Responsive design — media queries, relative units (rem, em, %, vw/vh).
- Accessibility basics — alt text, ARIA, labels.
How to prepare
Frontend rounds often ask you to reason about layout and debug CSS verbally. Practise explaining the box model and specificity out loud. Greenroom runs spoken technical interviews that follow up on your reasoning. Pair it with our frontend and JavaScript guides.
Frequently asked questions
What are the most common HTML and CSS interview questions?
Common questions cover the CSS box model, content-box vs border-box, flexbox vs grid, positioning (static, relative, absolute, fixed, sticky), margin collapsing, specificity and the cascade, !important, pseudo-classes vs pseudo-elements, semantic HTML, block vs inline elements, responsive design with media queries and relative units, and accessibility basics.
What is the CSS box model?
The box model describes how every element is rendered as a rectangular box composed of, from inside out, the content, padding (space inside the border), border, and margin (space outside the border). With box-sizing: content-box (the default), width and height apply to the content only; with border-box, they include padding and border, which makes sizing more predictable.
What is the difference between flexbox and grid?
Flexbox is one-dimensional, laying items out in a single row or column and excelling at distributing space and aligning items along that axis — ideal for navbars, toolbars and component-level layouts. CSS Grid is two-dimensional, controlling rows and columns simultaneously, which suits full-page and complex layouts. They're often combined: grid for the overall structure, flexbox within components.
How should I prepare for an HTML and CSS interview?
Build genuine depth on the parts people fake — the box model, specificity and the cascade, flexbox vs grid, and positioning — and practise explaining why a layout behaves a certain way, like why an element won't center. Rehearse these explanations out loud with a voice-based mock interview that follows up, since frontend rounds often involve verbal layout debugging.