Middle HTML & CSS Interview Questions (50 MCQs)

Question 1

Which selector usually has higher specificity?

Accepted Answer

`#header`

Answer

`div`

Answer

`.card`

Answer

`*`

Question 2

Which operation is usually more expensive?

Accepted Answer

Changing `width` that triggers reflow/layout

Answer

Changing `color` (repaint)

Answer

Changing only GPU `opacity`

Answer

Reading a JS variable

Question 3

What does a BFC help with?

Accepted Answer

Containing floats and preventing outer margin collapse

Answer

Making JavaScript faster

Answer

Enabling Service Workers

Answer

SVG only

Question 4

Which property creates a new stacking context?

Accepted Answer

`transform` other than none

Answer

`color`

Answer

`margin`

Answer

`font-size`

Question 5

How does `position: sticky` behave?

Accepted Answer

Relative until a threshold, then fixed within its container

Answer

Always fixed to the viewport

Answer

Leaves flow like absolute

Answer

Only works in tables

Question 6

Difference between `:hover` and `::before`?

Accepted Answer

`:hover` is a pseudo-class (state); `::before` is a pseudo-element

Answer

Both are pseudo-elements

Answer

`::before` only works with JavaScript

Answer

`:hover` inserts content

Question 7

Difference between `defer` and `async` on `<script>`?

Accepted Answer

`defer` runs in order after parsing; `async` runs on download, unordered

Answer

Both block HTML parsing

Answer

`async` always runs after `DOMContentLoaded`

Answer

No difference

Question 8

What do `srcset` and `sizes` on `<img>` do?

Accepted Answer

Let the browser pick the best image for display size and pixel density

Answer

Download all images at once

Answer

Lazy-load the image

Answer

Convert the image format

Question 9

Advantage of CSS custom properties (`--x`) over Sass variables?

Accepted Answer

Live at runtime, cascade, and can change via JS

Answer

They are removed at build time

Answer

They only work in IE

Answer

They ignore specificity

Question 10

A flex item with a long unbreakable string (like a URL) overflows the container despite `flex: 1`. What's the usual fix?

Accepted Answer

`min-width: 0` on the flex item

Answer

`flex-grow: 0` on the flex item

Answer

`display: inline-flex` on the container

Answer

`justify-content: stretch` on the container

Question 11

In a row flex container, if an item has both `width: 200px` and `flex-basis: 300px`, what is its initial size?

Accepted Answer

`300px`; a non-`auto` `flex-basis` takes precedence over `width`

Answer

`200px`; `width` always wins

Answer

`500px`; the values add up

Answer

`250px`; they are averaged

Question 12

Why does `align-content: center` have no effect on a single-line (`nowrap`) flex container?

Accepted Answer

`align-content` distributes flex lines on the cross axis, so it only matters with multiple lines

Answer

`align-content` only works in Grid

Answer

It must be paired with `justify-content`

Answer

It's set on items, not the container

Question 13

What's the difference between `repeat(auto-fill, minmax(200px, 1fr))` and `repeat(auto-fit, ...)` when there are few items?

Accepted Answer

`auto-fill` keeps empty tracks; `auto-fit` collapses them so items stretch

Answer

`auto-fit` keeps empty tracks; `auto-fill` removes them

Answer

`auto-fill` creates rows and `auto-fit` columns

Answer

No difference

Question 14

What is the main benefit of `grid-template-areas`?

Accepted Answer

Readable visual layout via named areas, easy to rearrange in media queries

Answer

Reordering the DOM for screen readers

Answer

Removing the need for `display: grid`

Answer

Automatically creating columns from content

Question 15

With `grid-template-rows: 100px 100px` and 6 items in 2 columns, how is the third row's height set?

Accepted Answer

It's an implicit row, sized by `grid-auto-rows` (default `auto`)

Answer

Extra items are not displayed

Answer

It automatically becomes `100px`

Answer

Extra items overlap earlier rows

Question 16

What is the difference between `:is()` and `:where()`?

Accepted Answer

`:where()` always has zero specificity; `:is()` takes its most specific argument's

Answer

`:is()` accepts only one selector

Answer

`:where()` isn't supported in browsers

Answer

`:is()` always has zero specificity

Question 17

What is the specificity of `button:not(.primary)`?

Accepted Answer

`(0,1,1)`; `:not` itself doesn't count but its argument does

Answer

`(0,0,1)`; `:not` zeroes the argument

Answer

`(0,2,1)`; `:not` and `.primary` both count

Answer

`(1,0,1)`

Question 18

An inline `style="color: red"` vs a stylesheet rule `#title { color: blue !important; }`. Which applies?

Accepted Answer

Blue; an `!important` declaration beats a normal inline style

Answer

Red; inline styles always win

Answer

Red; because it appears later in HTML

Answer

Neither; the browser uses the default color

Question 19

What value does the `currentColor` keyword resolve to?

Accepted Answer

The element's own `color` property value

Answer

The parent's background color

Answer

The OS accent color

Answer

The last color used in the stylesheet

Question 20

With nested lists and `li { font-size: 1.2em; }`, what problem arises?

Accepted Answer

The size compounds per level, growing ever larger

Answer

All levels stay exactly the same size

Answer

Inner levels get smaller

Answer

`em` is ignored in `font-size`

Question 21

How does `font-size: clamp(1rem, 2.5vw, 2rem)` behave?

Accepted Answer

Scales with viewport width but never below `1rem` or above `2rem`

Answer

Picks one of the three values randomly

Answer

Is always `2.5vw`

Answer

Only works inside media queries

Question 22

When does `aspect-ratio: 16 / 9` not take effect?

Accepted Answer

When both `width` and `height` are explicitly set

Answer

When the element is `display: block`

Answer

When only `width` is set

Answer

On any element other than `<img>`

Question 23

For a site in both Persian (RTL) and English (LTR), what should replace `margin-left`?

Accepted Answer

`margin-inline-start`, which flips automatically with text direction

Answer

`margin-right` plus a separate RTL class is always better

Answer

`margin-start`

Answer

`float: start`

Question 24

What does the "first rule of ARIA" say?

Accepted Answer

If a native HTML element with the needed semantics and behavior exists, use it instead of ARIA

Answer

Put a `role` on every element

Answer

ARIA always beats semantic HTML

Answer

Use ARIA only in forms

Question 25

If you must use `

`, what else is required?

Accepted Answer

`tabindex="0"` and activation via Enter and Space keys

Answer

Only `cursor: pointer`

Answer

Just an `onclick`; `role` handles the rest

Answer

`aria-hidden="true"`

Question 26

What's the problem with `aria-hidden="true"` on a container with links?

Accepted Answer

Links still receive Tab focus but screen readers announce nothing

Answer

Links become visually hidden

Answer

Links are disabled and clicks stop working

Answer

No problem; it's the recommended approach

Question 27

To announce "Item added to cart" to screen reader users without moving focus, what do you use?

Accepted Answer

A live region like `aria-live="polite"` or `role="status"`

Answer

The browser's `alert()`

Answer

A `title` on the button

Answer

`aria-hidden="false"` on the message

Question 28

What is the purpose of a "skip link" at the top of a page?

Accepted Answer

Lets keyboard users bypass repeated navigation and jump to main content

Answer

Ignores broken links

Answer

Speeds up search engine indexing

Answer

Skips page animations

Question 29

What is the advantage of `:focus-visible` over `:focus`?

Accepted Answer

Shows focus rings for keyboard users but usually not on mouse clicks

Answer

Removes focus entirely for all users

Answer

Only works on elements visible in the viewport

Answer

Moves focus to the next element automatically

Question 30

What is `@media (prefers-reduced-motion: reduce)` used for?

Accepted Answer

Reducing or removing animations for users who requested it in OS settings

Answer

Lowering battery usage in power-saving mode

Answer

Disabling JavaScript

Answer

Detecting slow devices

Question 31

What does adding `color-scheme: light dark` to `:root` do?

Accepted Answer

Lets the browser theme form controls, scrollbars and default background to match the OS

Answer

Automatically inverts all site colors

Answer

Forces dark theme for everyone

Answer

Only changes link colors

Question 32

When is `<picture>` with `<source media>` preferred over plain `srcset`?

Accepted Answer

For art direction (different crop/image per size) or serving new formats like AVIF

Answer

To make the image lazy-load

Answer

Only for SVG images

Answer

To remove the need for `alt`

Question 33

What does `loading="lazy"` on `<img>` do, and where should it be avoided?

Accepted Answer

Defers download until near the viewport; avoid it on the above-the-fold hero/LCP image

Answer

Downloads a lower-quality image; avoid on logos

Answer

Downloads after page `load`; fine on any image

Answer

Only works on `<iframe>`

Question 34

For a numeric OTP field, why is `inputmode="numeric"` on `type="text"` often better than `type="number"`?

Accepted Answer

Shows a numeric keypad without number quirks like spinners, dropped leading zeros and scroll changes

Answer

`type="number"` doesn't show a numeric keypad on mobile

Answer

`inputmode` performs server-side validation

Answer

`inputmode` encrypts the value

Question 35

Why is setting precise `autocomplete` values (like `email`, `new-password`) important?

Accepted Answer

Correct autofill, password manager support and meeting WCAG 1.3.5

Answer

So the browser auto-submits the form

Answer

So inputs are encrypted

Answer

It only matters for SEO

Question 36

A "show password" button inside a `<form>` submits the form on click. Why?

Accepted Answer

A `<button>`'s default `type` in a form is `submit`; set `type="button"`

Answer

All clicks inside a form submit it

Answer

Because the button has no `onclick`

Answer

Because the form has no `action` attribute

Question 37

Why does `input:invalid { border-color: red }` give a poor UX, and what's the modern alternative?

Accepted Answer

Empty `required` fields are red on page load; `:user-invalid` applies only after user interaction

Answer

`:invalid` never matches; use `:error` instead

Answer

`:invalid` only works after server submit

Answer

No issue; `:invalid` only applies after blur

Question 38

What does `input.setCustomValidity("...")` do?

Accepted Answer

Marks the field invalid with a custom message until reset with an empty string

Answer

Only changes the placeholder text

Answer

Permanently disables browser validation

Answer

Sends the field value to the server

Question 39

What is the difference between `dialog.showModal()` and `dialog.show()`?

Accepted Answer

`showModal()` opens in the top layer with `::backdrop`, makes the rest inert, and closes on Escape

Answer

`show()` makes the rest of the page inert

Answer

`showModal()` only changes appearance, no behavior

Answer

No difference

Question 40

How does `font-display: swap` in `@font-face` behave?

Accepted Answer

Text shows immediately in a fallback font, swapped once the web font loads

Answer

Text stays hidden until the font fully loads

Answer

The web font is never used

Answer

Removes the font from cache

Question 41

Why doesn't `transition: height 0.3s` animate from `height: 0` to `height: auto`?

Accepted Answer

`auto` isn't an interpolable length; workarounds include `grid-template-rows: 0fr→1fr` or `interpolate-size`

Answer

Because `height` can never be transitioned

Answer

Because duration must exceed 1 second

Answer

Because transitions only work on `transform`

Question 42

Why does `width: 100vw` often cause horizontal scrolling on Windows?

Accepted Answer

`vw` includes the vertical scrollbar's width

Answer

`vw` is always 10% wider than the viewport

Answer

Because `vw` is added to body margin

Answer

Because Windows doesn't support `vw`

Question 43

Why does `height: 100vh` on mobile sometimes hide content under the address bar?

Accepted Answer

`vh` uses the largest viewport (toolbar collapsed); `dvh` or `svh` fix it

Answer

Because mobiles convert `vh` to `vw`

Answer

Because `vh` includes the virtual keyboard

Answer

Because `100vh` only works in landscape

Question 44

Why was `rel="noopener"` recommended on `<a target="_blank">` to external links?

Accepted Answer

So the new page can't access `window.opener` and redirect the original (tabnabbing)

Answer

So the link opens faster via prefetch

Answer

So the link opens in the same tab

Answer

So search engines don't follow the link

Question 45

What does `pointer-events: none` on a decorative overlay do?

Accepted Answer

Clicks pass through it to elements underneath

Answer

Hides the overlay

Answer

Makes underlying elements unclickable

Answer

Removes it from Tab order and hides it from screen readers

Question 46

Which combination is needed to show "..." at the end of long single-line text?

Accepted Answer

`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`

Answer

Only `text-overflow: ellipsis;`

Answer

`overflow: scroll; text-overflow: ellipsis;`

Answer

`word-break: break-all; text-overflow: ellipsis;`

Question 47

What is `@supports (display: grid) { ... }` used for?

Accepted Answer

Applying styles only when the browser supports that property/value

Answer

Auto-installing a Grid polyfill

Answer

Checking browser speed

Answer

Enabling Grid in old browsers

Question 48

How do browsers match a selector like `.sidebar ul li a`?

Accepted Answer

Right to left: start from all `a`s, then check ancestors

Answer

Left to right: start from `.sidebar`, then descendants

Answer

In random order

Answer

Only classes are checked; tags are ignored

Question 49

Why is `max-width: 65ch` recommended for paragraphs?

Accepted Answer

It keeps line length around 65 characters for readability

Answer

`ch` means a fixed 65 pixels

Answer

`ch` is based on viewport height

Answer

It only works with monospace fonts

Question 50

What's the best way to associate a validation error message with an input for screen readers?

Accepted Answer

`aria-describedby` pointing to the error's id plus `aria-invalid="true"` on the input

Answer

Just making the field border red

Answer

Putting the message in the field's `title`

Answer

Putting the message in the `placeholder`

HTML & CSS · Middle · 50

Which selector usually has higher specificity?