Interview questions
Top 30 CSS Interview Questions (with answers)
Revision list of 30 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.
- 30 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.