Fifteen common HTML and CSS interview questions
- What is semantic HTML, and why does it matter?
- How do you make a page accessible?
- What does the alt attribute do, and when should it be empty?
- Explain the CSS box model and box-sizing.
- How does specificity work?
- What are the position values, and how do they differ?
- What is a stacking context, and why doesn't z-index work sometimes?
- Flexbox versus grid — when to use each?
- How do you centre an element horizontally and vertically?
- How do media queries and container queries differ?
- What units would you use: px, em, rem, %, vw?
- What are pseudo-classes and pseudo-elements?
- What are CSS custom properties?
- How do you prevent layout shift?
- How do you organise CSS in a large project?
HTML and accessibility
- Semantic HTML uses elements for their meaning — header, nav, main, article, button — which helps screen readers, search engines and maintainability.
- Accessibility basics: proper headings in order, labels for form inputs, keyboard operability, visible focus styles, sufficient contrast, and ARIA only when native elements can't express the role.
- alt text describes meaningful images; decorative images get alt="" so screen readers skip them.
- Use button for actions and a for navigation — a div with a click handler isn't keyboard accessible by default.
The box model, specificity and positioning
| Concept | Answer |
|---|---|
| Box model | Content, padding, border, margin; box-sizing: border-box includes padding and border in the width |
| Specificity | Inline styles beat IDs beat classes, attributes and pseudo-classes beat elements; later rules win ties |
| position: relative | Offsets from its normal position; creates a reference for absolute children |
| position: absolute | Removed from flow; positioned relative to the nearest positioned ancestor |
| position: fixed / sticky | Relative to the viewport / sticks within its scroll container after a threshold |
| Stacking context | Created by positioned elements with z-index, opacity below 1, transforms and more; z-index only compares within the same context |
Layout
Flexbox lays items out in one dimension — a row or a column — and suits navigation bars, toolbars and aligning items. Grid lays out two dimensions — rows and columns together — and suits page layouts and card grids; repeat(auto-fill, minmax(240px, 1fr)) creates a responsive grid without media queries. To centre an element both ways: on the parent, display: grid; place-items: center, or display: flex with justify-content and align-items set to center.
Responsive design and units
- Design mobile first, then add breakpoints with min-width media queries.
- Container queries adapt a component to its container's size rather than the viewport — ideal for reusable components.
- rem scales with the root font size and respects user settings; em scales with the parent; px is absolute; vw and vh are viewport-relative.
- Use responsive images with srcset and sizes.
Performance and organisation
Prevent layout shift by setting width and height or aspect-ratio on images and embeds and reserving space for late content. Keep critical CSS small, avoid deeply nested selectors, and animate transform and opacity rather than layout properties. Organise large codebases with a naming convention such as BEM, CSS modules or utility-first CSS, plus design tokens in custom properties for colours and spacing. See frontend interview questions and JavaScript interview questions.
Practising
Reading answers is not the same as saying them. Pick ten of the questions above and answer them aloud against a timer; a free AI interview assistant like CoPilot Interview can ask HTML and CSS questions in a mock interview and flag answers that ran long or lacked an example. Build a responsive, accessible card grid with a navigation bar from scratch in 30 minutes, then check it with only a keyboard.
Disclosure: CoPilot Interview is our product, so weigh what we say about it accordingly. Everything else on this page applies whichever tool you use, or none.
Frequently asked questions
What are common HTML and CSS interview questions?
Semantic HTML, accessibility, alt text, the box model, specificity, positioning, stacking contexts, flexbox versus grid, centring, media and container queries, units, pseudo-classes, custom properties and layout shift.
Flexbox or grid?
Flexbox for one-dimensional layouts such as rows of items or navigation bars; grid for two-dimensional layouts such as page structures and card grids. They're often combined.
Why doesn't z-index work?
z-index only compares elements within the same stacking context, and it applies to positioned elements. A parent creating its own stacking context limits how high a child can appear.
What is box-sizing: border-box?
It makes an element's width and height include padding and border, so layouts are easier to reason about.
Practise on real interview questions
Run 145 real interview questions across 10 tracks, answer out loud and see a structured answer to compare with yours. Free, no signup.
Try a practice question