Intermediate CSS Interview Questions and Answers

Specificity is counted as (ids, classes/attributes/pseudo-classes, elements/pseudo-elements) and compared left to right. #nav a is (1, 0, 1); .menu .item a is (0, 2, 1). The id wins, because one id outranks any number of classes. Inline styles beat both, and !important beats normal declarations. :where() contributes zero specificity.

Flexbox is one-dimensional: items in a row or a column, sized by their content (navbars, toolbars, aligning items in a line). Grid is two-dimensional: rows and columns together, where you define the layout and items fill it (page layouts, galleries, dashboards). They are often combined: a Grid page with Flexbox inside components.

In Flexbox, justify-content aligns items along the main axis (horizontal for flex-direction: row), and align-items aligns them along the cross axis (vertical for rows). With flex-direction: column the axes swap. In Grid, justify-* is the inline (row) axis and align-* the block (column) axis.

It is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Items start from zero size and share the free space equally, so several flex: 1 items end up equal width (unless their content is wider than their share). flex: auto (1 1 auto) starts from the content size instead, and flex: none keeps the natural size.

When vertical margins of block boxes touch, they combine into a single margin equal to the larger one, instead of adding up. It happens between adjacent siblings and between a parent and its first or last child when no padding, border or content separates them. It never happens to horizontal margins or inside flex and grid containers.

Common reasons: the element is not positioned (and not a flex or grid item), so z-index is ignored; or the element is inside a stacking context (created by an ancestor with opacity below 1, a transform, a filter, a positioned element with a z-index, and so on). A child can never appear above something outside its parent's stacking context, whatever its own z-index.

Write base styles for small screens, then add @media (min-width: ...) rules for larger screens, in increasing order. Small-screen layouts are usually simpler, so the base CSS stays small and larger screens add complexity rather than undoing it. It also pairs with the viewport meta tag and fluid units.

In CSS: img { max-width: 100%; height: auto; } so images shrink with their container and keep their aspect ratio, plus width and height attributes in HTML to prevent layout shift. In HTML: srcset and sizes (or <picture>) so the browser downloads an appropriately sized file. object-fit: cover crops images to fill a box with a fixed aspect ratio.

A transition animates between two states when a property changes (for example on :hover); it needs a trigger and only has a start and an end. A keyframe animation (@keyframes plus animation) can run on its own, loop, have many intermediate steps, alternate direction and be paused. For performance, animate transform and opacity.

Custom properties (--brand: #2f5fe0; read with var(--brand)) live in the browser: they inherit through the DOM, can be changed per component, in media queries and by JavaScript at runtime, which makes them ideal for theming. Sass variables are replaced with fixed values when the Sass is compiled, so they cannot change at runtime or per element.

A naming convention: Block (.card), Element (.card__title) and Modifier (.card--featured). Every selector is a single class, so specificity stays low and equal, names show where styles belong, and components do not leak into each other.

Use a "visually hidden" utility class rather than display: none or visibility: hidden (which also hide content from assistive technology):

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

rem spacing is consistent across the whole page because it depends only on the root font size; use it for most layout spacing. em spacing scales with the element's own font size, which is useful inside components that come in sizes, such as buttons whose padding should grow with their text (padding: 0.5em 1em).

It controls how an <img> or <video> fills its box when the box has a different aspect ratio: cover fills the box and crops the excess, contain shows the whole image with empty space, fill (default) stretches it. object-position chooses which part stays visible.