Interview questions
Top 50 CSS Interview Questions (with answers)
Revision list of 50 css interview questions for frontend engineers, with concise answers and links to deeper Frontend Beauty guides. Composite list for practice—not a ranked survey.
Composite practice list based on common frontend interview themes and publicly discussed fundamentals. Ordering is editorial for learning, not a statistical “most asked” ranking from a single company.
- 50 questions
- css
How to use this list
- Answer out loud in 60–90 seconds, then check the written answer.
- Where a “Deeper guide” link appears, open it after you attempt the answer yourself.
- Pair with DSA, machine coding, and playground drills.
css
1.What is the CSS box model?
Every box has content, padding, border, and margin. With content-box, width applies to content only; with border-box, width includes padding and border. Most layout systems set border-box globally.
2.What is the difference between content-box and border-box?
content-box: specified width/height size the content area; padding and border add outside. border-box: specified width/height include content, padding, and border—usually easier for column math and components.
3.When do you use Flexbox versus Grid?
Flexbox is strong for one-dimensional distribution (rows or columns of components). Grid is strong for two-dimensional page/section layouts. Real UIs often combine both.
4.What do flex-grow, flex-shrink, and flex-basis do?
flex-basis is the initial main size before free space is distributed. flex-grow shares positive free space. flex-shrink reduces items when space is tight. Defaults matter—know flex: 1 shorthand implications.
5.What is the difference between align-items and justify-content in Flexbox?
justify-content distributes along the main axis; align-items aligns on the cross axis. Direction depends on flex-direction. Interviewers often swap axis names—draw it.
6.What is the fr unit in CSS Grid?
fr represents a fraction of available free space in the grid container. repeat(3, 1fr) builds equal columns after accounting for gaps and fixed tracks.
7.What is the difference between auto-fit and auto-fill?
Both create as many tracks as fit. auto-fit collapses empty tracks so items can expand; auto-fill keeps empty track slots. Used with minmax for responsive grids without many breakpoints.
8.How does position: sticky work?
The element acts relatively until a scroll threshold, then sticks within its containing block. Overflow hidden/auto on ancestors is a common reason sticky “fails.”
9.What is a stacking context?
A local stacking order for z-index. Properties like opacity < 1, transforms, filters, and positioned elements with z-index can create new contexts—so z-index only competes inside that context.
10.How does CSS specificity work?
Roughly: inline styles > IDs > classes/attributes/pseudo-classes > elements. Equal specificity falls to source order. Cascade layers can override raw specificity between layers.
11.What are cascade layers (@layer) for?
They let you order groups of styles (reset, base, components, utilities) so later layers win without escalating selector weight. Important rules reverse layer order—know that twist.
12.What are CSS custom properties good for?
Tokens for color, space, and type that cascade and can change at runtime (theming). They are live in the cascade—unlike preprocessors variables that compile away.
13.What is the difference between em and rem?
em is relative to the element’s computed font-size (and can compound). rem is relative to the root font-size—usually safer for spacing scales.
14.Why can 100vh be problematic on mobile?
Mobile browser chrome can make classic vh units jump. Prefer dvh/svh/lvh where supported, and test real devices for full-height layouts.
15.What are container queries?
They let components respond to their container’s size rather than only the viewport—better for reusable cards in sidebars vs main columns.
16.How does clamp() help fluid typography?
clamp(min, preferred, max) sets a responsive value that won’t go below min or above max—common for type and spacing without many breakpoints.
17.Why animate transform and opacity instead of top/left/width?
transform/opacity are more often compositor-friendly and avoid layout thrash. Changing geometry properties frequently triggers layout and paint more expensively.
18.What is :focus-visible and why use it?
It styles focus for keyboard (and some other) modalities without forcing a ring on every mouse click. Never remove focus outlines without an accessible replacement.
19.What is the difference between :is() and :where()?
Both group selectors. :where() always contributes zero specificity; :is() takes the specificity of its most specific argument—easy footgun with IDs inside :is().
20.What does the :has() selector enable?
Selecting a parent based on descendants/state (e.g. form:has(:invalid)). Powerful; use carefully for performance and complexity.
21.How do you reduce layout shift from images and embeds?
Reserve space with width/height or aspect-ratio, avoid inserting banners above content without reserved space, and be careful with web font swaps.
22.What is prefers-reduced-motion for?
A user preference to minimize non-essential motion. Respect it by shortening or disabling decorative animations—important for vestibular accessibility.
23.How do you implement dark mode thoughtfully?
Use tokens with prefers-color-scheme and/or a class strategy, ensure contrast, and avoid relying on color alone for state. Test form controls and shadows in both themes.
24.What is BFC (block formatting context) in practical terms?
A layout region that contains floats and prevents margin collapse in certain cases. Triggers include overflow values, flex/grid items, etc. Useful vocabulary for older float bugs.
25.Why might z-index appear to “not work”?
The element may not be positioned, or a parent stacking context isolates it. Fix the stacking context structure rather than inventing huge z-index numbers.
26.What is the difference between absolute and fixed positioning?
absolute is relative to the nearest positioned ancestor. fixed is relative to the viewport (with caveats under transforms on ancestors that create containing blocks).
27.What are logical properties in CSS?
Properties like margin-inline and inset-block that follow writing mode—not just physical left/right. They improve RTL and vertical writing support.
28.How does gap differ from margin for flex/grid layouts?
gap spaces items inside flex/grid without collapsing edge margins the same way. It is usually cleaner for consistent gutters between items.
29.What is minmax(0, 1fr) fixing in Grid?
Grid items default to min-size: auto, which can prevent shrinking below content size and cause overflow. minmax(0, 1fr) allows tracks/items to shrink properly.
30.What is content-visibility used for?
It can skip rendering work for offscreen content to improve performance. Use with care for accessibility and find-in-page behavior; measure impact.
31.How should you approach CSS architecture at scale?
Keep specificity low, prefer layers/tokens, consistent naming (BEM/utilities), and avoid IDs in app CSS. The goal is predictable overrides without !important wars.
32.What is the difference between transitions and animations?
Transitions interpolate when a property changes. Animations use keyframes for multi-step timelines independent of a single state change. Prefer transitions for simple UI state.
33.How do media queries and container queries work together?
Media queries adapt to viewport/device. Container queries adapt components to their parent. Use media for page chrome and containers for reusable widgets.
34.What is will-change and when is it harmful?
It hints the browser to prepare optimizations for upcoming changes. Overuse wastes memory by promoting layers. Apply temporarily near an animation, then remove.
35.How do you center a flex or grid item reliably?
Flex: justify-content and align-items center on the container (or margin auto on the child). Grid: place-items: center. Know at least two solid techniques without hacks.
36.What is the cascade versus inheritance?
Cascade chooses which declaration wins for a property. Inheritance fills certain properties (like color) from parents when nothing is declared. margin does not inherit; color does.
37.How do you handle overflow and scrolling accessibly?
Ensure keyboard users can reach scrollable regions, manage focus in modal scroll locks, and use overscroll-behavior to avoid scroll chaining. Do not trap focus accidentally.
38.What is the purpose of aspect-ratio?
It reserves a box’s proportions before content loads—critical for media placeholders and CLS control—often paired with object-fit for images.
39.What are common pitfalls of absolute positioning for layout?
It removes elements from normal flow, breaking document flow layouts and responsive reflow. Prefer flex/grid for page structure; use absolute for overlays and badges.
40.How does color contrast relate to CSS decisions?
Text and meaningful icons need sufficient contrast (WCAG). Theme tokens should be checked in light and dark. Never use color as the only state indicator.
41.What is the difference between visibility: hidden and display: none?
display:none removes from layout and typical accessibility tree exposure. visibility:hidden hides visually but still occupies space. opacity:0 may still be focusable—handle focus.
42.How do you style focus for custom components?
Ensure a visible :focus-visible style, do not rely on outline:none alone, and match keyboard expectations from ARIA APG for the widget type.
43.What is subgrid useful for?
It lets nested grids align to parent tracks so inner cards share columns with outer layouts. Support is modern; know the problem it solves even if you polyfill with other techniques.
44.How do font-loading strategies affect CLS and UX?
font-display, subsetting, and fallback metrics reduce invisible text or layout swaps. Measure FOIT/FOUT tradeoffs for your brand fonts.
45.What is the role of a CSS reset or layer-based base styles?
They reduce browser default inconsistencies. Modern teams often use a minimal normalize plus layered base styles rather than a heavy-handed reset of everything.
46.How do you debug CSS efficiently in DevTools?
Inspect computed styles, see which rule wins and why (specificity/layers), use the box model overlay, and toggle declarations. For layout bugs, check flex/grid overlays.
47.What is object-fit and when do you use it?
It controls how replaced content (images/video) fits a box—cover crops to fill, contain letterboxes. Pair with a defined box size or aspect-ratio.
48.How does sticky positioning interact with overflow on parents?
An ancestor with overflow hidden/auto/scroll can become the scroll container and prevent sticky relative to the viewport as you expected. Inspect the real scrolling ancestor.
49.What are design tokens in a CSS context?
Shared raw values (color, space, radius, type) exposed as custom properties so components stay consistent and theming is centralized.
50.How do you keep specificity low in a growing codebase?
Prefer classes over IDs, avoid deep selectors, use layers, and resist !important except rare utilities. Review PRs for specificity escalation as a design smell.