Interview preparation guide · Updated 2026
HTML and CSS Interview Questions with Answers (2026)
HTML and CSS interviews test whether you can build interfaces that are semantic, accessible, responsive, and predictable across browsers. Be ready to explain element choice, the cascade, layout algorithms, intrinsic sizing, and rendering performance. The best answers connect platform rules to a small UI example or debugging scenario.
By FrontendPro Editorial Team Last reviewed August 8, 2026
What you need to know
Use these topic clusters as a checklist. Each answer should define the concept, show where it matters, and include a concrete example or trade-off.
Semantic HTMLChoose elements by meaning, maintain a logical document outline, and understand how native semantics support browsers and assistive technology.AccessibilityCover keyboard interaction, visible focus, labels, alternative text, landmarks, color contrast, and when ARIA is actually necessary.The cascade and specificityReason about origin, importance, cascade layers, specificity, scoping, inheritance, and source order when debugging unexpected styles.Flexbox, Grid, and intrinsic sizingSelect a layout model based on the problem, then explain alignment, available space, min-content behavior, and common overflow traps.Responsive designBuild from content constraints using fluid sizes, container or media queries, responsive images, and layouts that tolerate localization.Rendering performanceUnderstand style calculation, layout, paint, compositing, font loading, and which CSS changes are likely to cause expensive visual updates.
Practice questions with answers
Open a question for a direct explanation, detailed answer, related concepts, and runnable code where the problem includes a coding exercise.
CSS interview questions
- How do the different ways of hiding an element differ for accessibility?Intermediate · Answer and explanation
- What is the difference between auto-fit and auto-fill in Grid?Advanced · Answer and explanation
- How do you implement dark mode properly in CSS?Intermediate · Answer and explanation
- What is BEM and which problem does it solve?Intermediate · Answer and explanation
- What does :has() make possible that CSS previously couldn't do?Advanced · Answer and explanation
- Why should you animate only transform and opacity?Advanced · Answer and explanation
- How do container queries differ from media queries?Intermediate · Answer and explanation
- What is margin collapsing and how do you prevent it?Intermediate · Answer and explanation
- What is a stacking context, and why can z-index: 9999 still be covered?Advanced · Answer and explanation
- How do CSS custom properties differ from SCSS variables?Intermediate · Answer and explanation
- What is the difference between a pseudo-class and a pseudo-element?Basic · Answer and explanation
- What are the ways to center an element on both axes?Basic · Answer and explanation
- When do you use px, em, rem, %, vw/vh and ch?Basic · Answer and explanation
- How do the position values differ?Basic · Answer and explanation
- When should you use Flexbox versus Grid?Intermediate · Answer and explanation
- How is CSS specificity calculated?Intermediate · Answer and explanation
- What is the box model, and what does box-sizing: border-box change?Basic · Answer and explanation
HTML interview questions
- What problems do <dialog> and <details> solve natively?Intermediate · Answer and explanation
- How do you embed third-party content in an <iframe> safely?Advanced · Answer and explanation
- Compare localStorage, sessionStorage and cookiesIntermediate · Answer and explanation
- What does the <meta name="viewport"> tag do?Basic · Answer and explanation
- When do you need ARIA, and what is the first rule of ARIA?Intermediate · Answer and explanation
- How do you serve responsive images with srcset, sizes and <picture>?Intermediate · Answer and explanation
- How do plain <script>, defer and async differ?Intermediate · Answer and explanation
- What form validation does HTML provide out of the box?Intermediate · Answer and explanation
- What are data-* attributes used for?Basic · Answer and explanation
- What is the difference between the id and class attributes?Basic · Answer and explanation
- What is the difference between block, inline and inline-block elements?Basic · Answer and explanation
- What are semantic HTML elements and why should you use them?Basic · Answer and explanation
How to prepare efficiently
Do not memorize a long script. Practice a repeatable answer structure: direct answer, short example, edge case, and trade-off.
- Start with native HTML behavior before reaching for ARIA or JavaScript.
- Draw the box and identify its containing block when debugging layout.
- Explain why Flexbox or Grid fits the problem instead of naming one as universally better.
- Test keyboard navigation, zoom, long text, reduced motion, and narrow screens.
- Use browser DevTools to inspect computed styles, layout overlays, and accessibility information.