Top 45 CSS Interview Questions & Answers 2025

Every element is a rectangular box: content (actual content), padding (space between content and border), border, margin (space outside border). box-sizing: content-box (default — width = content only), border-box (width includes padding + border — almost always preferred). Total width = content + padding + border + margin. Use * { box-sizing: border-box } globally for predictable sizing.

Specificity determines which CSS rule wins when multiple rules target same element. Calculation (a, b, c, d): a = inline styles (1000), b = IDs (100 each), c = classes/attributes/pseudo-classes (10 each), d = elements/pseudo-elements (1 each). !important overrides specificity. Same specificity: last rule wins. Use low specificity for utility classes, higher for component overrides. Avoid !important except for utilities.

Some CSS properties inherit (color, font-*, line-height, visibility, cursor). Others don't (margin, padding, border, background, display). Use inherit explicitly to force inheritance, initial to reset to default, unset (inherits if inheritable, else initial), revert (browser stylesheet). all: unset resets all properties. Inheritance enables setting typography once on body and having it cascade.

Cascade determines which styles apply when multiple rules match. Priority order: (1) Transition declarations, (2) !important user-agent, (3) !important user, (4) !important author, (5) Author declarations (highest specificity wins), (6) User declarations, (7) User-agent (browser defaults). Among same priority: specificity, then source order. CSS Cascade Layers (@layer) give explicit control over cascade order.

Flexbox is a one-dimensional layout. Container: display:flex, flex-direction (row/column), justify-content (main axis alignment), align-items (cross axis), flex-wrap, gap. Items: flex-grow (fill available space), flex-shrink (shrink when overflow), flex-basis (initial size), flex shorthand (grow shrink basis), align-self (override align-items), order. Use for: nav bars, card rows, centering, equal-height columns.

Grid is two-dimensional (rows and columns). Define: grid-template-columns/rows (repeat, fr, minmax), gap. Place items: grid-column/row (span multiple), grid-area with named areas. auto-fill vs auto-fit for responsive columns. Use Grid for: complex two-dimensional layouts, overlapping elements, consistent alignment across rows. Use Flexbox for: one-dimensional, dynamic item sizes, navigation bars. Often combine both.

Static (default): normal flow. Relative: offset from own position, still in flow, creates stacking context. Absolute: removed from flow, positioned relative to nearest non-static ancestor. Fixed: removed from flow, positioned relative to viewport (stays on scroll). Sticky: relative until threshold, then fixed within parent — for sticky headers/sidebars. Use z-index with positioned elements.

Stacking context: isolated z-index layer. Created by: position + z-index (not auto), opacity < 1, transform, filter, isolation: isolate. z-index only works within same stacking context — a child with z-index:999 can't escape parent with z-index:1. Debug with browser DevTools layers panel. Common issue: modal stuck behind navbar — ensure modal is child of body or same stacking context as navbar.

Custom properties: --color-primary: #8b5cf6. Access with var(--color-primary, fallback). Scoped to selector (cascade-aware). Can be changed with JavaScript: element.style.setProperty("--var", value). Key feature: they cascade like normal properties — override in component scope. Use for: theming, design tokens, dynamic values. Unlike preprocessor variables, they're runtime and reactive.

prefers-color-scheme media query: @media (prefers-color-scheme: dark) {}. With CSS variables: define --bg, --text in :root, override in @media dark or .dark class. Manual toggle: add .dark class to html/body element, JavaScript toggle + localStorage. CSS color-scheme property signals browser to use native dark UI. Tailwind: darkMode: "class" config. Test both modes; ensure sufficient contrast.

Logical properties use writing-mode-aware names instead of physical directions. Instead of margin-left, use margin-inline-start. Instead of padding-top, use padding-block-start. block = vertical axis (top/bottom in horizontal writing), inline = horizontal (left/right). Support internationalization (RTL languages) automatically. New properties: inset, margin-inline, padding-block, border-block. Modern frameworks increasingly adopt logical properties.

Transitions: simple state change between two values, triggered by class/property change. Specify: property, duration, timing-function, delay. Animations: keyframe-based (@keyframes), can loop, auto-play, more complex. animation shorthand: name duration timing-function delay iteration-count direction fill-mode. Use transitions for: hover states, toggle. Use animations for: loading spinners, entrance effects, continuous motion.

Approaches: (1) Media queries (@media (max-width: 768px)), (2) Fluid typography (clamp(min, vw, max)), (3) CSS Grid auto-fill/fit columns, (4) Flexbox wrapping, (5) Responsive images (srcset, sizes), (6) Container queries (@container — respond to parent size). Mobile-first: write base styles for mobile, use min-width media queries for larger. Use rem for font sizes, % or vw for widths.

Pseudo-classes (:): select element in a state. :hover, :focus, :active, :nth-child(), :not(), :is(), :where(), :has() (parent selector). Pseudo-elements (::): select part of element. ::before, ::after (require content property), ::placeholder, ::selection, ::first-line. :is() and :where() simplify complex selectors. :has() enables styling parent based on child — a game-changer.

BEM: Block__Element--Modifier. Block: standalone component (.card). Element: part of block (.card__header, .card__body). Modifier: variation (.card--featured, .card__header--large). Benefits: clear relationships, low specificity (single class), maintainable. Alternatives: SMACSS, OOCSS, utility-first (Tailwind). Modern component frameworks (React/Vue) reduce need for BEM via scoped styles or CSS Modules.