CSS Interview Questions

Four layers, and what width measures.

Every element is a box of content, padding, border and margin. With the default box-sizing: content-box, width is only the content width, so padding and border are added on top. With border-box, width includes padding and border, which is why most stylesheets set *, *::before, *::after { box-sizing: border-box; }.

Three numbers, compared left to right.

Specificity is counted as (ids, classes/attributes/pseudo-classes, elements/pseudo-elements). #nav a is (1,0,1) and beats .menu .item a at (0,2,1), because one id outranks any number of classes. Inline styles beat selectors, !important beats normal declarations, and if specificity ties, the later rule wins. :where() adds zero.

Which ones leave the normal flow?

static (default, normal flow); relative (stays in flow, offset from its normal place, and becomes the reference for absolute children); absolute (removed from flow, placed in the nearest positioned ancestor); fixed (relative to the viewport); sticky (scrolls normally, then sticks at a threshold within its container).

One dimension or two?

Flexbox is one-dimensional: a row or a column of items sized by their content (navbars, toolbars, centering a row). Grid is two-dimensional: rows and columns together, where the layout defines the tracks (page layouts, galleries, dashboards). They are often combined.

Two lines on the parent.

.parent {
  display: grid;
  place-items: center;
}

Or with Flexbox: display: flex; justify-content: center; align-items: center;. A block with a width can be centered horizontally with margin-inline: auto.

Vertical margins only.

Adjacent vertical margins of block boxes combine into one margin the size of the larger, instead of adding up. It happens between siblings and between a parent and its first or last child when nothing separates them. It never happens to horizontal margins or inside flex and grid containers.

Positioning, and stacking contexts.

z-index only applies to positioned elements and flex or grid items. More often, the element is inside a stacking context created by an ancestor (a positioned element with a z-index, opacity below 1, transform, filter and others). A child can never rise above things outside its parent's stacking context, whatever its own z-index.

What is each relative to?

px is fixed. em is relative to the element's font size (compounds when nested). rem is relative to the root font size, so it respects the user's setting and is good for font sizes. % is relative to the parent (for width, the parent's width). vw and vh are 1% of the viewport width and height.

Which media query feature do you use?

Base styles target small screens, and @media (min-width: ...) rules add layout for larger screens in increasing order. The base CSS stays simple, and larger screens add rather than undo styles.

Layout, paint, composite.

transform and opacity, because browsers can usually animate them on the compositor without recalculating layout or repainting. Animating width, height, top or margin triggers layout on every frame and can stutter. Also respect prefers-reduced-motion.

A parent selector.

:has() selects an element based on its descendants or following siblings, for example .card:has(img) or label:has(input:checked). Styling a parent based on child state used to require JavaScript.

Reusable components in different places.

Media queries respond to the viewport; container queries respond to the size of an ancestor marked with container-type: inline-size. A component placed in both a wide column and a narrow sidebar on the same screen can adapt to its actual space with @container rules.

Not display none.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

display: none and visibility: hidden also hide content from assistive technology.