HTML & CSS Interview Questions

Most interview mistakes here are not about syntax. They are about not knowing why a rule does not apply, why a z-index does nothing, or why a page jumps while it loads. This lesson explains the rules behind those surprises, then the questions that test them. I ran every behaviour claim in a real browser.

Words used in this lesson

• Semantic HTML is HTML where each tag's name describes its meaning (<nav>, <button>, <h1>), not just its look.
• A screen reader is a program that reads the page aloud for people who cannot see it. It reads the accessibility tree, a simplified copy of the page that lists each element's role (button, link, heading), name and state.
• The cascade is the set of rules that picks one value when many CSS rules set the same property on one element. Specificity is a score that says how strongly a selector (the part before {) claims an element.
• LCP (Largest Contentful Paint) is the time until the biggest visible element is drawn. CLS (Cumulative Layout Shift) is a score for how much content jumps while loading. See Browser, Lesson 09.

Semantic HTML and accessibility basics

Definition: an element is semantic when its tag tells the browser what role it plays. The browser then gives it behaviour for free: focus, keyboard support and a role for screen readers. Everyday comparison: a road sign has a shape and colour that tell you its meaning before you read it. A <div> is a blank board.

<header>…logo and <nav aria-label="Main">…</nav></header><main>  <h1>Orders</h1>  <section aria-labelledby="open-h"><h2 id="open-h">Open orders</h2>…</section></main><footer>…</footer>

• Landmarks (header, nav, main, aside, footer) let a screen-reader user jump to the main content. Use one <main> per page. Give each of two <nav> elements an aria-label.
• Headings form an outline. Choose the level for the meaning, then use CSS for the size.
• A <button> does something on this page. An <a href> goes somewhere. A <div onClick> is neither: Tab skips it, Enter and Space do nothing, and it has no role.
• Images need alt text that says what the image means. Use alt="" for decoration.
• Focus. Everything clickable must be reachable with Tab and visibly focused. Never write outline: none without a replacement. :focus-visible shows the ring for keyboard users and usually not for mouse clicks.
• Numbers to know. WCAG (Web Content Accessibility Guidelines) level AA asks for text contrast of 4.5:1 (3:1 for large text) and, since version 2.2, touch targets of at least 24 by 24 CSS pixels.
• ARIA (Accessible Rich Internet Applications) is a set of attributes (role, aria-label, aria-expanded) that add meaning when HTML cannot. The first rule: do not use ARIA if a native element does the job. ARIA changes what is announced but adds no behaviour. A role="button" on a div still ignores the keyboard.

Native elements that replace old JavaScript widgets: <dialog> with showModal() (a modal with focus handling), the popover attribute (a floating panel that closes on outside click), <details> with <summary> (give several the same name and only one stays open), and inert (makes a whole branch unfocusable and unclickable).

Forms and validation

Definition: a form is a group of fields the browser submits as one request. Validation is checking that the values are acceptable. The browser has built-in (constraint) validation: you describe rules with attributes, and it checks them on submit.

<form action="/signup" method="post">  <label for="email">Email</label>  <input id="email" name="email" type="email" required autocomplete="email"         aria-describedby="email-help">  <p id="email-help">We never share it.</p>  <label>Age <input name="age" type="number" min="18" max="120" inputmode="numeric"></label>  <label>Code <input name="code" pattern="[A-Z]{3}[0-9]{3}" title="Three capitals, then three digits"></label>  <button>Create account</button>   <!-- default type is "submit" --></form>

• Always connect a label to its input (for/id, or wrap the input). Clicking the label focuses the input and the screen reader announces the name. A placeholder is not a label: it vanishes when the user types.
• The right type (email, tel, number) gives the right mobile keyboard and a first check. autocomplete lets password managers fill the field.
• A <button> in a form is type="submit" by default. A "Cancel" button needs type="button". This is a common bug.
• The Constraint Validation API is the JavaScript side. input.validity has flags such as valueMissing, typeMismatch, patternMismatch, rangeOverflow. form.checkValidity() returns true or false. input.setCustomValidity("text") marks a field invalid with your message, and setCustomValidity("") clears it. While a message is set, the form cannot submit.
• Styling: :invalid matches as soon as the page loads, so an empty required field is red before the user typed. :user-invalid matches only after the user interacted. Use :user-invalid for error styles (Chrome 119, Firefox 88, Safari 16.5).
• Add novalidate to the form when you run your own validation and messages.
• Accessible errors: write the message as text beside the field, link it with aria-describedby, set aria-invalid="true", and do not use red alone.

Loading and performance attributes

Small attributes change when the browser fetches and runs things. See Browser, Lesson 00 for the full path.

What I checked in a real browser:

• Three defer scripts ran in written order after the DOM existed. Three async scripts ran in the order they finished.
• A plain script blocks parsing, not rendering by itself. Old advice says "put scripts before </body>". Today the better answer is defer in the <head>: the browser finds the file early and still runs it after parsing.
• A font preload needs crossorigin, even on your own origin. Without it the preloaded file is not reused and the font downloads twice.

Give images width and height (or CSS aspect-ratio), so the browser reserves the space and the page does not jump (a lower CLS). Use srcset and sizes so a phone does not download a desktop image.

<img src="/hero-800.avif" width="1200" height="600" alt="Warehouse robots at work"     srcset="/hero-800.avif 800w, /hero-1600.avif 1600w"     sizes="(min-width: 900px) 900px, 100vw"     fetchpriority="high">

In Next.js, <Image> lazy-loads by default and takes sizes and fetchPriority="high" (or preload) for the LCP image. The older priority prop is deprecated since Next.js 16.

The cascade: which rule wins

Definition: the cascade is the algorithm that picks one winning value. It asks, in order:

1. Relevance: does the selector match, and is the media condition true?
2. Origin and importance: browser styles, user styles, your styles; !important flips the order. Running transitions beat even !important.
3. Cascade layers (@layer): a later layer beats an earlier one, and unlayered styles beat all layers.
4. Specificity: the score of the selector.
5. Order of appearance: the last rule wins.

Specificity is only the fourth question.

Specificity

Count three columns: IDs - classes - types. Compare from left to right. A bigger left column always wins.

* and combinators (>, +, space) add nothing. Eleven classes do not beat one ID: the columns do not carry over.

Cascade layers

Definition: @layer creates a named layer. You set the order of layers once, and that order beats specificity.

@layer reset, base, components, utilities;   /* order = priority; last wins */@layer components { .btn { padding: .5rem 1rem; } }@layer utilities  { .p-0 { padding: 0; } }   /* wins, even with lower specificity */

You stop fighting with #app .page .card .btn: a utility wins because its layer is later. Tailwind v4 is built on this: its CSS starts with @layer theme, base, components, utilities;. Two traps:

• Unlayered CSS beats every layer. A plain p { color: red } wins over @layer utilities { #id.x.y { color: blue } }. When you add layers to an old project, put the old CSS in a layer too.
• !important reverses the layer order. An important rule in an earlier layer beats one in a later layer.

Inheritance

Definition: inheritance means a child takes its parent's computed value when no rule sets that property. Text properties inherit (color, font-*, line-height, text-align, visibility, cursor). Box properties do not (margin, padding, border, background, width).

Custom properties

Definition: a custom property (CSS variable) is a value you name with -- and read with var(). Unlike a Sass variable, it is live in the browser: it follows the cascade and inheritance, and JavaScript or a media query can change it.

:root { --gap: 1rem; --brand: oklch(60% 0.2 260); }.card { padding: var(--gap); border-color: var(--brand); margin: var(--missing, 7px); }.card.compact { --gap: .5rem; }   /* the children read the new value too */

• var(--x, fallback) uses the fallback only when --x is not defined.
• Trap: if --x is defined but not valid for the property (color: var(--x) with --x: 12px), the property becomes invalid at computed-value time. It falls back to the inherited or initial value, not to the earlier line you wrote. In my test, color: red; color: var(--c) gave black.
• @property --n { syntax: "<length>"; inherits: false; initial-value: 0px; } registers a typed variable. A bad value then falls back to initial-value, and the variable can be animated (Chrome 85, Firefox 128, Safari 16.4).

The box model and margin collapse

Definition: every element is a box of four layers, from inside out: content, padding, border, margin. box-sizing decides what width means. With width: 200px, padding: 20px and border: 5px:

Almost every project starts with *, *::before, *::after { box-sizing: border-box; } (Tailwind's base layer does). Also: percentage padding and margin use the containing block's width, even top and bottom, and height: 50% does nothing if the parent has no definite height. Prefer rem over px for sizes, so the page respects the user's font setting.

Margin collapse

Definition: margin collapse is when touching vertical margins of block boxes merge into one margin, the biggest of them. It happens in three cases: two siblings; a parent and its first or last child when nothing separates them (no border, padding or inline content); and an empty block's own top and bottom margins.

What I measured: siblings with 20px margins had a 20px gap. A child's margin-top: 30px pushed the parent down 30px. display: flow-root on the parent made that 0. In a flex or grid container the gap was 40px, since flex and grid items never collapse. A +30px and a -10px margin gave 20px.

Fixes: display: flow-root on the parent (a box that contains its children's margins and floats), a border or padding, or gap in flex or grid.

Layout: flexbox, grid, subgrid and container queries

Flexbox

Definition: flexbox (display: flex) is a one-direction layout that places items in a row or column and shares the free space.

.toolbar { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }.toolbar .grow { flex: 1; }

• flex: 1 is 1 1 0%; flex: auto is 1 1 auto; flex: none is 0 0 auto. The numbers are: grow, shrink, starting size.
• The classic trap: a flex item has min-width: auto, so it will not shrink below its content. A long nowrap line pushed an item in a 200px container to 568px. min-width: 0 (plus overflow: hidden or overflow-wrap: anywhere) brought it back to 200px. In a column, use min-height: 0.

Grid

Definition: grid (display: grid) is a two-direction layout with rows and columns.

.cards {  display: grid;  gap: 1rem;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));}

This is the responsive grid with no media query: each column is at least 15rem (or full width on a tiny screen) and shares the extra space. auto-fit vs auto-fill: both create as many columns as fit. With two items in 700px, auto-fill kept the empty tracks (175px each), while auto-fit collapsed them so the items stretched (350px each).

Difference in one line: flexbox lets the content decide sizes along one line; grid lets the layout decide sizes in two directions. Grid for page layouts and card grids, flex for toolbars and rows of buttons. Mixing them is normal.

Subgrid

Definition: grid-template-columns: subgrid lets a nested grid reuse the tracks of its parent grid. Use it when the title, text and button of separate cards must line up across the cards. Support: Chrome 117, Firefox 71, Safari 16.

Container queries

Definition: a container query (@container) applies CSS based on the size of a parent container, not the screen. A media query asks "how wide is the window?" A container query asks "how wide is the box I live in?" A card then works in a narrow sidebar and in a wide area.

.card-wrap { container-type: inline-size; container-name: card; }.card { display: grid; gap: .5rem; }@container card (min-width: 30rem) {  .card { grid-template-columns: 8rem 1fr; }   /* side by side when its box is wide */}

• Mark the parent with container-type: inline-size. The query can style only descendants of the container, never the container itself (I tested it).
• container-type: size also watches height, so the box no longer takes its height from its content; mine collapsed to 0. Prefer inline-size.
• Units such as cqi (1% of the container's inline size) exist too. Support: Chrome 105, Firefox 110, Safari 16.

Positioning and stacking contexts

Stacking contexts

Definition: a stacking context is a group of elements ordered together as one unit along the z-axis (the depth towards the viewer). Inside it, children compare z-index only with each other. The whole group then takes one place in its parent's order. Everyday comparison: a folder of papers. Page 9999 is the top page of that folder, but a folder lying above it on the desk covers the whole thing.

A new stacking context is created by (the MDN list):

• the root <html>
• position: relative or absolute with a z-index other than auto
• position: fixed or sticky
• a flex or grid item with a z-index other than auto (no position needed)
• opacity below 1
• transform, filter, backdrop-filter, clip-path, mask, perspective
• mix-blend-mode other than normal, and isolation: isolate
• will-change naming a property from this list
• contain: layout or contain: paint
• top-layer elements (a modal <dialog>, a popover)

.card { opacity: .99; }                            /* creates a stacking context */.card .tooltip { position: absolute; z-index: 9999; }

The tooltip's 9999 only counts inside .card. An outside element with z-index: 2 is drawn above the whole card. I tested it: the 9999 child lost when its parent had opacity: .99 (or even will-change: opacity), and won without it.

How to debug: walk up the parents in DevTools until you find the one that creates a context. Then move the element out (a portal renders a React child elsewhere in the DOM, usually at the end of <body>), remove the property, or create a clean context on purpose with isolation: isolate on the component.

More tested facts:

• z-index is ignored on a static element, but works on a flex or grid item without position.
• A transform, filter or will-change: transform on a parent makes it the containing block for position: fixed children. A "fixed" header inside an animated wrapper then moves with it.
• Why sticky fails: sticky sticks relative to the nearest ancestor that scrolls. An ancestor with overflow: hidden, auto or scroll becomes that scroller even if it never scrolls, so the element moved to -100px with the page. overflow: clip clips without becoming a scroller. Also check that top is set and the parent is taller than the element.

Responsive design

Definition: a page is responsive when it adapts to the space it has without a separate site. Mobile-first means the base CSS is for small screens, and min-width queries add layout for bigger ones.

:root { --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }body { font-size: var(--step-0); }.hero { min-height: 100dvh; padding-inline: clamp(1rem, 4vw, 3rem); }@media (width >= 48rem) {     /* range syntax: Chrome 104, Firefox 102, Safari 16.4 */  .layout { display: grid; grid-template-columns: 16rem 1fr; }}

• clamp(min, preferred, max) gives the preferred value but never below the minimum or above the maximum. clamp(1rem, 2vw + .5rem, 2rem) measured 16px at 400px wide, 24px at 800px and 32px at 1600px. Keep rem in the preferred part, so text still grows when the user raises their font size. Pure vw text does not.
• Viewport units. On phones the address bar shows and hides, so 100vh can be taller than the visible area. svh is the small viewport (bars shown), lvh the large one (bars hidden), and dvh the dynamic one that follows the bars. Use min-height: 100dvh for full-screen sections. On desktop all four are equal. Support: Chrome 108, Firefox 101, Safari 15.4.
• Media queries are for the page frame and user settings (prefers-color-scheme, prefers-reduced-motion). Container queries are for components. I use both.
• Helpers: aspect-ratio: 16 / 9, object-fit: cover, text-wrap: balance for short headings (Chrome 114, Firefox 121, Safari 17.5), and scroll-padding-top for anchor links under a sticky header.

Modern CSS you can use now

First version with support, from the MDN browser-compat data:

:has() is a "parent selector": A:has(B) selects an A that contains (or is followed by) something matching B. Before it, you needed JavaScript.

.field:has(input:user-invalid) { --ring: crimson; }     /* style the wrapper */form:has(:invalid) button[type="submit"] { opacity: .5; }h2:has(+ p) { margin-block-end: .25rem; }               /* heading directly followed by a paragraph */

Keep the left side narrow: a broad body:has(.x) can be costly on busy pages.

Native nesting lets you write a rule inside another, with & standing for the parent. It is plain CSS and needs no Sass.

.card {  padding: 1rem;  & .title { font-weight: 600; }  &:hover { box-shadow: 0 2px 8px #0003; }  .dark & { background: #222; }  @media (width >= 40rem) { padding: 2rem; }}

Two differences from Sass. The suffix trick &-title (to make .card-title) does not work in native CSS; nothing matched in my test. And nested rules act like :is(), so they take the highest specificity of the parent selector list.

@scope (@scope (.card) to (.slot) { p { … } }) styles p inside .card but not inside .slot. All three engines support it only since 2026, so I know the idea and check my audience before I use it. CSS Modules and layers solve most of the same problems.

Animations and rendering performance

A frame goes through style, layout, paint and composite. Changing a property redoes its step and every step after it.

So move with transform: translate() and fade with opacity. The compositor can run them even while JavaScript is busy.

• will-change (will-change: transform) is a hint that tells the browser to prepare a separate layer early. In a test it created one extra composited layer. MDN says to use it as a last resort for a real problem and sparingly, since it uses memory. Add it just before the animation and remove it after. It also creates a stacking context.
• content-visibility: auto lets the browser skip layout and paint for off-screen sections, which speeds up the first render of long pages. Add contain-intrinsic-size: auto 500px (an estimated height). Without it the skipped section had 0 height in my test (500px with it), and the scrollbar jumps. Skipped content stays in the accessibility tree and find-in-page.
• Animating to height: auto does not work with a transition (mine jumped to the end). The portable trick: make the wrapper a grid and animate grid-template-rows from 0fr to 1fr, with overflow: hidden on the child (it measured 25px of 54px at the middle). interpolate-size works only in Chrome today.
• Respect motion settings with @media (prefers-reduced-motion: reduce). Avoid reading layout (offsetHeight) and then writing styles in a loop (Debugging, Lesson 01).

CSS architecture

CSS is global: any rule can touch any element. Three common answers:

In Next.js, a .module.css file imported as styles gives unique class names out of the box. The docs warn that final CSS order follows your import order and can differ between next dev and next build. So keep specificity low and check the production build.

Dark mode and print

Dark mode has two sources of truth: the system setting (prefers-color-scheme) and the user's saved choice.

:root { color-scheme: light dark; }   /* browser parts (scrollbars, form controls) match too */:root {  --bg: light-dark(#fff, #14161a);  --text: light-dark(#14161a, #eceff4);}:root[data-theme="light"] { color-scheme: light; }:root[data-theme="dark"]  { color-scheme: dark; }body { background: var(--bg); color: var(--text); }

• light-dark(a, b) picks a colour for the active scheme. It reads color-scheme, so set that first. The data-theme rules let a user override the system.
• Avoid the flash. Reading the saved choice in useEffect paints light first, then flips. Run a tiny inline script in the <head> that sets data-theme before first paint. The Next.js docs show this pattern, with suppressHydrationWarning on <html> since the script changes an attribute before React starts.
• Tailwind v4's dark: follows prefers-color-scheme. For a manual toggle: @custom-variant dark (&:where(.dark, .dark *));.

Print: use @media print to hide navigation, use black on white, show link addresses (a[href^="http"]::after { content: " (" attr(href) ")"; }) and avoid breaks inside blocks (break-inside: avoid). Test with DevTools "Emulate CSS media type: print".

Typical debugging traps

Interview questions

Key takeaways

• Native HTML first: the right element, a label on every field, a visible focus ring, ARIA only when HTML cannot do the job.
• Loading: defer for your scripts, an eager fetchpriority="high" LCP image, and a size on every image.
• The cascade asks importance and layers first, then specificity (IDs - classes - types), then order. Unlayered CSS beats layers.
• Layout: border-box; margin collapse is vertical and block-only; flex for one dimension, grid for two; min-width: 0 fixes many flex overflows.
• Stacking: z-index works only inside a stacking context, and opacity, transform or will-change on a parent can trap it.
• Responsive and fast: clamp() with rem, dvh, container queries for components; animate only transform and opacity.
• Dark mode: color-scheme, light-dark() and an inline script to avoid the flash.

What's next

To see how these pieces connect to the full page load and Core Web Vitals, read Browser, Lesson 09. For the React side of accessibility, see Frontend Depth, Lesson 06.