HTML and CSS are underestimated until a layout breaks in production. These questions separate people who memorised properties from those who understand the model.
Hiring a HTML & CSS developer is easy. Telling a real one from a convincing résumé is the hard part — and it’s most of what we do. These are grouped by level, because the same question that stretches a junior is a warm-up for a senior.
Junior HTML & CSS interview questions
0–2 years
Fundamentals.
What is the CSS box model?
Every element is a box of content, padding, border and margin; box-sizing: border-box makes width include padding and border.
Can’t explain why widths overflow with padding.
What is the difference between block, inline and inline-block?
Block elements take full width and stack; inline flow within text and ignore width/height; inline-block flows but accepts dimensions.
Sets width on an inline element and is confused it’s ignored.
What is semantic HTML and why does it matter?
Using meaningful elements (header, nav, article) for structure, aiding accessibility and SEO.
Builds everything from divs.
What is the difference between id and class?
An id is unique per page and higher specificity; classes are reusable; prefer classes for styling.
Styles with ids everywhere, creating specificity wars.
What is the difference between rem, em, px and %?
px is absolute; em is relative to the element’s font size; rem to the root; % to the parent.
Uses only px and can’t scale accessibly.
How does flexbox work?
A one-dimensional layout: a flex container aligns and distributes children along a main and cross axis.
Reaches for floats for everything.
What is the difference between visibility: hidden and display: none?
display:none removes the element from layout; visibility:hidden hides it but keeps its space.
Uses them interchangeably.
How do you make a site responsive?
Fluid layouts, relative units, flexbox/grid and media queries; mobile-first is a common approach.
Fixes one desktop width in pixels.
Mid-level HTML & CSS interview questions
2–5 years
Layout and specificity.
When do you use CSS Grid vs Flexbox?
Grid for two-dimensional layouts (rows and columns), Flexbox for one-dimensional distribution; they compose well together.
Forces complex 2D layouts with nested flexboxes.
How does specificity work?
Inline > id > class/attribute/pseudo-class > element; more specific wins, and !important overrides — a smell if overused.
Fixes everything with !important.
What is the difference between position: relative, absolute, fixed, sticky?
Relative offsets from its normal spot; absolute positions to the nearest positioned ancestor; fixed to the viewport; sticky toggles between relative and fixed.
Cannot predict what an absolutely-positioned element anchors to.
How does the cascade and inheritance work?
Styles cascade by origin, specificity and order; some properties inherit (color, font) and others don’t.
Expects every property to inherit.
What causes layout shift and how do you prevent it?
Images or ads without reserved dimensions, late-loading fonts; reserve space and set width/height to improve CLS.
Ignores CLS and content jumps around.
How do transitions and animations differ?
Transitions animate between two states on change; keyframe animations define multi-step sequences that can loop.
Uses JS timers where CSS would do.
What are pseudo-classes vs pseudo-elements?
Pseudo-classes target states (:hover, :focus); pseudo-elements target parts (::before, ::first-line).
Confuses : and :: usage.
How do you handle cross-browser differences?
Progressive enhancement, feature queries (@supports), sensible resets and testing on target browsers.
Assumes it works everywhere because it works in one browser.
Senior HTML & CSS interview questions
5+ years
Architecture, performance and a11y.
How do you architect CSS at scale?
A methodology (BEM, utility-first, CSS modules or scoped styles) to avoid specificity wars and global collisions.
Global styles with deep selectors and no system.
How do you optimise CSS performance?
Minimise render-blocking CSS, avoid expensive selectors and layout thrash, and be mindful of what triggers reflow vs repaint.
No awareness of reflow/paint costs.
What CSS properties are cheap to animate?
transform and opacity are compositor-friendly; animating layout properties like width/top is costly.
Animates left/width and causes jank.
How do you build accessible interfaces?
Semantic markup, keyboard operability, focus management, sufficient contrast, and ARIA only when native semantics fall short.
Bolts ARIA onto div soup instead of using real elements.
What are container queries and custom properties good for?
Container queries style based on a component’s own size; custom properties enable theming and runtime-dynamic values.
Only knows global media queries and Sass variables.
How do you manage theming and dark mode?
CSS custom properties with a theme switch, respecting prefers-color-scheme, and sufficient contrast in both themes.
Hardcodes colours and can’t theme.
How do you prevent and debug z-index and stacking issues?
Understand stacking contexts (created by position, opacity, transform) rather than escalating z-index numbers.
Sets z-index: 9999 and hopes.
How do you ship CSS that’s maintainable across a team?
Conventions, linting, design tokens, scoped or modular styles, and documentation so styles don’t rot.
Everyone adds ad-hoc overrides.
Build and score a full interview with our free interview scorecard tool, browse the full question hub, or see how we interview engineers.