Senior HTML & CSS Interview Questions (50 MCQs)

Question 1

What does Critical CSS mean?

Accepted Answer

Above-the-fold styles for faster First Paint

Answer

Removing all CSS entirely

Answer

Dark mode only

Answer

CSS written in TypeScript

Question 2

What do Container Queries respond to?

Accepted Answer

The component's parent/container size

Answer

Only the full viewport width

Answer

Only page height

Answer

The user's network speed

Question 3

Which is essential for an accessible modal?

Accepted Answer

Focus trap + Escape to close + restore focus

Answer

Only a red close button

Answer

Disabling the keyboard entirely

Answer

Using the browser `alert()`

Question 4

How does `content-visibility: auto` help?

Accepted Answer

Skips rendering off-screen content until it nears the viewport

Answer

Removes content from the DOM

Answer

Compresses images

Answer

Disables JavaScript

Question 5

What is the risk of overusing `will-change`?

Accepted Answer

Extra layers and high GPU memory use

Answer

Styles get removed

Answer

Browser syntax errors

Answer

No risk at all

Question 6

What does the `:has()` selector enable?

Accepted Answer

Selecting a parent based on its children or following elements

Answer

Selecting only the first child

Answer

Running JavaScript inside CSS

Answer

Importing another CSS file

Question 7

What problem does `@layer` solve?

Accepted Answer

Controls cascade order independent of specificity

Answer

Lazy-loads CSS files

Answer

Creates stacking contexts

Answer

Defines animations

Question 8

What is `<link rel="preload">` for?

Accepted Answer

Early, high-priority fetch of a critical resource for this page

Answer

Fetching the next page in the background

Answer

Permanently caching a file

Answer

Executing a script immediately

Question 9

Best way to prevent CLS from images?

Accepted Answer

Set `width`/`height` or `aspect-ratio` to reserve space

Answer

Load images after 5 seconds

Answer

Use `display: none`

Answer

Remove all images

Question 10

What is the correct order of the browser rendering pipeline after a style change?

Accepted Answer

Style → Layout → Paint → Composite

Answer

Layout → Style → Composite → Paint

Answer

Paint → Layout → Style → Composite

Answer

Composite → Paint → Style → Layout

Question 11

Why is this loop slow? `for (el of items) { el.style.width = box.offsetWidth + "px"; }`

Accepted Answer

Each `offsetWidth` read after a write forces a synchronous layout (layout thrashing)

Answer

Because `style.width` only triggers repaint

Answer

Because `offsetWidth` makes a network request

Answer

Because `for...of` loops are slow on the DOM

Question 12

Why does a CSS animation on `transform` stay smooth while the main thread is blocked by heavy JS, but one on `left` doesn't?

Accepted Answer

`transform` animations can run entirely on the compositor thread; `left` needs main-thread layout every frame

Answer

Because the JS engine optimizes `transform`

Answer

Because `left` only works with `position: static`

Answer

Because browsers cap `left` animations at 30fps

Question 13

What does `contain: layout paint` on an independent widget buy you?

Accepted Answer

Internal changes don't trigger layout/paint elsewhere, and content is clipped to its box

Answer

Renders the widget in a separate Web Worker

Answer

Removes the widget from the accessibility tree

Answer

Sets the widget's size to zero

Question 14

A `position: fixed` modal renders inside a card instead of covering the viewport. Most likely cause?

Accepted Answer

An ancestor has `transform`, `filter`, `perspective` or `contain: paint`, becoming the containing block

Answer

The card has `position: relative`

Answer

The card has a high `z-index`

Answer

The modal has `display: flex`

Question 15

What's the benefit of `isolation: isolate` on a component root?

Accepted Answer

Creates a stacking context with no side effects so inner `z-index`es don't compete with the page

Answer

Puts the component in Shadow DOM

Answer

Blocks outer styles from applying

Answer

Promotes the component to its own GPU layer

Question 16

What does `@scope (.card) to (.content) { img { ... } }` do?

Accepted Answer

Styles `img`s inside `.card` but not those inside `.content` (donut scope)

Answer

Isolates `img`s in Shadow DOM

Answer

Raises specificity to `(1,0,0)`

Answer

Selects only the first `img` in `.card`

Question 17

Why doesn't a transition on `--angle` in `conic-gradient(from var(--angle), ...)` work without `@property`?

Accepted Answer

Unregistered custom properties are untyped and can't be interpolated; `@property` with `syntax: "<angle>"` makes it animatable

Answer

Because gradients can never be animated

Answer

Because `var()` isn't allowed inside gradients

Answer

Because transitions only work on shorthands

Question 18

Given `p { color: blue; color: var(--c); }` with `--c: 20px`, what color is the text?

Accepted Answer

The inherited color; the declaration is invalid at computed-value time and acts like `unset`

Answer

Blue; the browser falls back to the previous declaration

Answer

Black, because the default is always black

Answer

Parse error, and the whole rule is dropped

Question 19

With `@layer reset, base;`, if both layers declare the same property with `!important`, which wins?

Accepted Answer

`reset`; layer order is reversed for important declarations

Answer

`base`; the later layer always wins

Answer

Whichever has higher specificity, regardless of layer

Answer

Both are ignored

Question 20

Why doesn't `@container (min-width: 400px) { .card { padding: 2rem; } }` apply to `.card` itself when `.card` has `container-type: inline-size`?

Accepted Answer

An element can't query its own size; container queries only style descendants of the container

Answer

Because `container-type` must be `size`

Answer

Because container queries only support `max-width`

Answer

Because `padding` isn't allowed in container queries

Question 21

In a row of cards each with title, text and button, how do you align these sections across all cards?

Accepted Answer

Give cards `grid-row: span 3` and `grid-template-rows: subgrid` to reuse the parent's tracks

Answer

Give all titles a fixed height

Answer

Use `display: contents` on the card body

Answer

Float each section

Question 22

How do you reduce layout shift from web font swapping without dropping `font-display: swap`?

Accepted Answer

Define a fallback `@font-face` with `size-adjust`, `ascent-override` and `descent-override` matching the web font

Answer

Increasing `line-height` to 3

Answer

Placing the font at the end of `<body>`

Answer

Using `font-weight: normal`

Question 23

What does `fetchpriority="high"` on a hero image do?

Accepted Answer

Raises request priority so it downloads before other images, improving LCP

Answer

Inlines the image as base64

Answer

Fetches from a closer CDN

Answer

Disables image compression

Question 24

An inline `

Accepted Answer

The script might read styles, so the browser blocks its execution until the CSSOM is ready

Answer

Because inline scripts always run last

Answer

Because CSS and JS share one connection

Answer

No such delay exists

Question 25

How does `<link rel="stylesheet" href="print.css" media="print">` behave during loading?

Accepted Answer

It downloads at low priority and doesn't block rendering

Answer

It never downloads unless printing

Answer

It blocks rendering like a normal stylesheet

Answer

It runs synchronously after page `load`

Question 26

What's the risk of `display: contents` on elements like `

Accepted Answer

Some browsers have dropped the element's semantics from the accessibility tree, and focusability can be lost

Answer

The element's children are removed from the DOM

Answer

The element renders twice

Answer

No risk; only the box is removed

Question 27

An `` also has a ``. Where does the accessible name come from?

Accepted Answer

`aria-labelledby`; it has the highest priority in accessible name computation

Answer

The `<label>`; it always beats ARIA

Answer

`aria-label`

Answer

All three are concatenated

Question 28

A `

` is injected into the DOM together with its text, and the screen reader says nothing. Why?

Accepted Answer

The live region must already exist; only subsequent changes to its content are announced

Answer

Because `role="status"` only works on `<span>`

Answer

Because it needs `aria-hidden="true"`

Answer

Because live regions only work in `<dialog>`

Question 29

What does the `inert` attribute do on content behind an open drawer?

Accepted Answer

Makes the subtree unfocusable, unclickable and hidden from the accessibility tree

Answer

Only dims the content visually

Answer

Only hides it from screen readers, like `aria-hidden`

Answer

Removes the content from the DOM

Question 30

For text only screen readers should read (e.g. an icon button label), which technique is correct?

Accepted Answer

A visually-hidden class with `position: absolute`, 1px size, `clip-path: inset(50%)` and `overflow: hidden`

Answer

`display: none`

Answer

`visibility: hidden`

Answer

`font-size: 0` and `color: transparent` in place

Question 31

In a toolbar or tablist with 10 buttons, what is the "roving tabindex" pattern?

Accepted Answer

Only the active item has `tabindex="0"`, others `-1`; arrow keys move within the widget

Answer

All items get sequential positive `tabindex` values

Answer

All items get `tabindex="-1"` and the widget is unreachable by Tab

Answer

`tabindex` shuffles randomly among items

Question 32

What accessibility problem does reordering visually with flex `order` or explicit grid placement cause?

Accepted Answer

Focus and screen reader order follow the DOM and mismatch the visual order

Answer

Reordered elements become unfocusable

Answer

Screen readers read reordered elements twice

Answer

None; browsers fix focus order automatically

Question 33

A focus ring using `outline: none; box-shadow: 0 0 0 3px blue` vanishes in Windows High Contrast. Why, and what's the fix?

Accepted Answer

Forced-colors mode removes `box-shadow`; use `outline: 2px solid transparent` or a real outline, which renders in system colors

Answer

Because High Contrast doesn't support CSS

Answer

Because blue is banned but a red `box-shadow` works

Answer

Because it needs a higher `z-index`

Question 34

Why does `height: 100%` on a child often have no effect?

Accepted Answer

Percentage height needs a definite parent height; if the parent is `height: auto`, it computes to `auto`

Answer

Because percentage height resolves against width

Answer

Because `height` only accepts `px`

Answer

Because it requires `box-sizing: content-box`

Question 35

In `grid-template-columns: 1fr 1fr`, a `<pre>` with a long line makes the columns unequal. Cause and fix?

Accepted Answer

`1fr` means `minmax(auto, 1fr)` with a min-content floor; use `minmax(0, 1fr)`

Answer

`fr` isn't fully supported; use percentages

Answer

`

` always breaks grids; replace it with ``

Answer

Add `grid-auto-flow: dense`

Question 36

What is the key difference between `overflow: clip` and `overflow: hidden`?

Accepted Answer

`clip` doesn't create a scroll container, so it won't break descendants' `position: sticky`, and programmatic scrolling is impossible

Answer

`clip` shrinks overflowing content to fit

Answer

`hidden` shows scrollbars while `clip` doesn't

Answer

None; `clip` is just a new name for `hidden`

Question 37

When content loads above the current scroll position, what mechanism prevents the content being read from jumping?

Accepted Answer

Scroll anchoring; the browser picks an anchor node and adjusts the scroll offset (controlled by `overflow-anchor`)

Answer

`scroll-behavior: smooth`

Answer

`scroll-snap-type`

Answer

There is none; jumps always happen

Question 38

When page content grows and a scrollbar appears, the whole layout shifts a few pixels. What's the modern fix?

Accepted Answer

`scrollbar-gutter: stable` to reserve scrollbar space in advance

Answer

`overflow: hidden` on `html`

Answer

`width: 100vw` on body

Answer

`scroll-behavior: smooth`

Question 39

How do you fade in an element going from `display: none` to `display: block` with pure CSS?

Accepted Answer

Use `@starting-style` for the initial `opacity` and `transition-behavior: allow-discrete` for `display`

Answer

Just `transition: display 0.3s`

Answer

Impossible; JavaScript is always required

Answer

With `animation-fill-mode: none`

Question 40

In the View Transitions API, why does giving every card in a list `view-transition-name: card` make the transition fail?

Accepted Answer

Each `view-transition-name` must be unique per snapshot; duplicates abort the transition

Answer

Because the name must start with `--`

Answer

Because View Transitions only work for page navigations

Answer

Because they must be `position: absolute`

Question 41

A tooltip built with the `popover` attribute lives inside an `overflow: hidden`, low-`z-index` container. What happens?

Accepted Answer

It renders in the top layer, unaffected by the parent's clipping or stacking context

Answer

It gets clipped by the parent's `overflow: hidden`

Answer

It stays beneath others unless given `z-index: 9999`

Answer

Popovers can't open inside overflow containers

Question 42

What is the main advantage of `oklch()` over `hsl()` for building color palettes?

Accepted Answer

Perceptually uniform lightness; equal `L` looks equally bright, and it reaches wide gamuts (P3)

Answer

It makes the CSS file smaller

Answer

It has better support in old browsers

Answer

It inverts colors for dark mode automatically

Question 43

Why is using `@import` inside CSS files bad for performance?

Accepted Answer

Imported files are discovered only after the parent downloads and parses, creating a serial render-blocking waterfall

Answer

`@import` applies styles twice

Answer

`@import` disables browser caching

Answer

`@import` only works over HTTP/1

Question 44

In a list where some items are `.hidden`, how do you zebra-stripe only the visible items?

Accepted Answer

`li:nth-child(odd of :not(.hidden))`

Answer

`li:not(.hidden):nth-child(odd)`

Answer

`li:nth-of-type(odd):not(.hidden)`

Answer

`li.visible:nth-child(2n)`

Question 45

An English username like `john_99!` inside a Persian sentence scrambles surrounding punctuation. What's the right fix?

Accepted Answer

Wrap it in `<bdi>` (or `dir="auto"`) to isolate its direction

Answer

Set the whole page to `direction: ltr`

Answer

Add extra spaces around the name

Answer

Use `text-align: right`

Question 46

On a bilingual site, what benefit does `unicode-range` in `@font-face` provide?

Accepted Answer

The browser downloads the font file only if characters in that range appear on the page

Answer

Removes characters outside the range from text

Answer

Translates the font to Persian automatically

Answer

Forces the font for all languages

Question 47

Why does Safari/VoiceOver sometimes not announce a `<ul>` with `list-style: none` as a list?

Accepted Answer

WebKit intentionally drops list semantics for marker-less lists; `role="list"` restores it

Answer

Because `list-style: none` removes it from the DOM

Answer

Because `<ul>` must always be `<ol>`

Answer

It's a bug fixed by `display: block`

Question 48

An `

` with `margin-top: 40px` sits inside a `
` with a background, but the gap appears above the header (outside the background). Why?

Accepted Answer

The first child's margin collapses through a parent with no padding, border or BFC

Answer

Because `<h1>` is always `position: absolute`

Answer

Because `<header>` has a default negative margin

Answer

Because backgrounds only paint the content box

Question 49

What is the difference between `text-wrap: balance` and `text-wrap: pretty`?

Accepted Answer

`balance` evens out line lengths (for short headings); `pretty` avoids orphans on the last line (for paragraphs)

Answer

`balance` justifies text; `pretty` smooths the font

Answer

They are identical

Answer

`pretty` only works on headings and `balance` only on paragraphs

Question 50

What problem does CSS Anchor Positioning (`anchor-name` and `position-anchor`) solve?

Accepted Answer

Positioning a tooltip or menu relative to any element, even outside its DOM subtree, with automatic edge fallbacks

Answer

Anchoring scroll to an element during content loads

Answer

Creating internal `#anchor` links

Answer

Pinning an element to the viewport like `position: fixed`

HTML & CSS · Senior · 50

What does Critical CSS mean?