Top 30 CSS & Design Systems Interview Questions and Answers
30 multiple-choice questions on CSS & Design Systems, of the kind that come up in a technical interview, drawn from 30 bites in the CSS & Design Systems library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
Tailwind, CSS, accessibility, design tokens
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
Four divs are set to width: 25%, 10px padding, and 1px border. Under the default box model, why does the last div wrap to a new line?
Show the answer
Answer: a · The declared width applies only to content, so padding and border add extra width.
Under the default content-box model, width applies only to the content area, so padding and border increase the rendered size beyond 25% and cause wrapping. Distractor D is wrong because content-box is the browser default, meaning padding is added outside the declared width rather than included in it.
Read the full bite: Explain the CSS box model: content-box vs border-box
Question 2 of 30
Which statement correctly explains why an ID selector beats a class selector when they conflict?
Show the answer
Answer: c · The ID rule wins because the specificity algorithm compares the ID column first, and 1-0-0 outranks 0-1-0
Specificity is a three-column value scored as ID-CLASS-TYPE, so an ID's 1-0-0 always beats a class's 0-1-0 before the CLASS column is ever evaluated. The most tempting distractor claims the later class wins, but source order only breaks ties when specificity is equal.
Read the full bite: What color wins when an ID and class rule conflict?
Question 3 of 30
An element has both id='banner' and class='active'. If #banner sets margin-top: 10px and .active sets margin-top: 20px, which value applies?
Show the answer
Answer: b · 10px, because an ID selector has higher specificity than a class selector
An ID selector contributes 1-0-0 to specificity while a class contributes 0-1-0, so #banner wins even if .active appears later. IDs being unique in the DOM is an HTML constraint, not the reason the cascade favors the ID selector.
Read the full bite: How do class and ID selectors differ in specificity and use case?
Question 4 of 30
A user-agent stylesheet sets a button to black with a high-specificity selector, and an author stylesheet sets it to blue with a low-specificity selector. What is the final color?
Show the answer
Answer: b · Blue, because author styles originate from a higher origin than user-agent styles, and origin is evaluated before specificity.
The cascade evaluates origin before specificity, so an author rule always beats a user-agent rule regardless of selector weight. Option A represents the common misconception that specificity trumps origin, while D incorrectly invokes source order when origin already differs.
Read the full bite: Describe the full CSS cascade precedence order
Question 5 of 30
Two adjacent block-level siblings in normal flow have margin-bottom: 30px and margin-top: 20px. What is the resulting vertical space between them?
Show the answer
Answer: d · 30px, because the larger of the adjacent margins is used
Margin collapsing means adjacent vertical margins in normal flow combine into a single margin equal to the largest value, so 30px is rendered. The 50px option reflects the common misconception that margins always add together.
Read the full bite: What is margin collapsing? Give a sibling scenario and prevention.
Question 6 of 30
Which statement correctly distinguishes a pseudo-element from a pseudo-class?
Show the answer
Answer: d · A pseudo-element styles a part or generated sub-part not present in the DOM
Pseudo-elements such as ::before style virtual parts not in the DOM, while pseudo-classes select existing elements by state. Only pseudo-elements use double colons in modern syntax, so the last option is wrong.
Read the full bite: Pseudo-class versus pseudo-element in CSS
Question 7 of 30
In a specificity conflict between `#header` and a selector with eleven classes, which statement is true?
Show the answer
Answer: a · The `#header` selector wins because the ID column outweighs any number of classes
The card explains that specificity is a tuple where the leftmost nonzero column wins, so one ID always beats any number of classes. Option D is tempting because it reflects the common error of collapsing the tuple into a single integer.
Read the full bite: How is CSS specificity calculated for a complex selector?
Question 8 of 30
A design system groups element selectors for a global reset. Developers complain that single-class utilities cannot override it. Switching from :is() to :where() fixes this because...
Show the answer
Answer: b · :where() has zero specificity, while :is() takes on the specificity of its most specific argument
:where() always has zero specificity, so a single class easily overrides it, whereas :is() inherits the most specific argument's weight, creating a barrier. Option D is tempting because it admits :where() is lower but incorrectly claims it still carries element-level weight rather than zero.
Read the full bite: Explain :is() vs :where() specificity and when to pick :where()
Question 9 of 30
An element with position: absolute has its offsets computed relative to which box?
Show the answer
Answer: a · The padding box of the nearest ancestor whose position is not static
Absolutely positioned elements resolve against the nearest positioned ancestor's padding box, not necessarily the direct parent. The viewport rule is for fixed, and the normal-flow ancestor rule applies to static and relative elements.
Question 10 of 30
When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?
Show the answer
Answer: a · HSL separates lightness from hue, allowing you to adjust shade with one value.
HSL keeps hue and saturation separate from lightness, so you can darken or lighten a color by adjusting a single percentage. Option D is a common misconception—modern HEX supports transparency in eight-digit notation, and D ignores that HSL reorganizes color data to make lightness adjustments intuitive.
Read the full bite: Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Question 11 of 30
Which approach correctly uses a custom WOFF2 font file to style all headings?
Show the answer
Answer: b · Define @font-face with a custom font-family name and a src descriptor, then apply that custom name via font-family on heading selectors
Custom fonts require a two-step process: an @font-face rule declares the font with a family name and src URL, and a separate selector applies that family name to elements. Option C confuses the file path with the family name, Option D wrongly assumes @font-face auto-applies, and Option A omits the src descriptor which makes the rule invalid.
Read the full bite: How do you declare a custom font and apply it to headings?
Question 12 of 30
What makes rem more predictable than em when sizing text in nested components?
Show the answer
Answer: a · rem references the root font size and avoids parent-level compounding
rem is always calculated from the root font-size, preventing nested elements from multiplying their size as em does. Distractor D is tempting but wrong because em references its direct parent, not the root, leading to unpredictable compounding in nested trees.
Read the full bite: Explain em, rem, px and why rem is preferred for font sizing
Question 13 of 30
Which CSS approach makes a background image completely fill its container while preserving its original aspect ratio?
Show the answer
Answer: d · background-size: cover; background-repeat: no-repeat;
background-size: cover scales the image until it fills the entire container and preserves its aspect ratio by cropping excess, whereas 100% 100% forces the image to match the container's exact dimensions and stretches it out of proportion.
Read the full bite: Which CSS background properties make a hero image cover its container?
Question 14 of 30
Which method correctly adds a top-to-bottom black gradient overlay—fully opaque at the top to half-transparent at the bottom—directly over a background image without extra DOM elements?
Show the answer
Answer: b · background-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5)), url(img.jpg);
In a comma-separated background-image list, the first layer renders closest to the viewer, so the gradient must be declared before the url to remain visible. Option D reverses that stacking order and hides the gradient behind the photo, while C adds unnecessary markup and D dims the entire image uniformly instead of creating a controlled fade.
Read the full bite: Create a vertical black gradient overlay on a background image
Question 15 of 30
When choosing font-display: swap over block for body text, what key user experience trade-off should you expect?
Show the answer
Answer: c · Swap shows fallback text almost immediately but risks layout shift when the custom font arrives, while block hides text briefly to avoid initial metric changes.
Swap displays fallback text within an extremely short block period but risks cumulative layout shift when the custom font metrics replace the fallback, whereas block hides text for a short block period to preserve initial visual stability. Distractor B is tempting but wrong because swap increases, not prevents, layout shift risk.
Read the full bite: What is font-display and how do swap and block differ?
Question 16 of 30
When architecting a maintainable CSS color system, what is the main benefit of defining tokens on :root and consuming them with var()?
Show the answer
Answer: c · It creates a single source of truth so updating one value propagates to all components
Defining tokens on :root creates a single source of truth inherited everywhere, so one edit updates all components using var(). Distractor A describes SASS variables, which are compiled away and cannot be mutated at runtime like native CSS custom properties.
Read the full bite: How do CSS Custom Properties manage a design system color palette?
Question 17 of 30
A heading has background-image: linear-gradient(gold, purple) and background-clip: text applied, yet the text still appears solid black. What is the root cause?
Show the answer
Answer: b · The foreground text color remains opaque and paints over the clipped background layer
The card states that foreground text color sits above the background in stacking order, so an opaque text fill completely obscures the clipped gradient unless color is transparent. Option C is a tempting distractor because candidates often confuse background-origin, which controls positioning, with background-clip, which controls the painting area.
Question 18 of 30
When controlling a variable font, why prefer font-weight over font-variation-settings where both can set weight?
Show the answer
Answer: b · High-level properties integrate with the cascade and inheritance more predictably
Dedicated properties like font-weight map to axes while participating cleanly in the cascade and animation, so they are preferred. font-variation-settings can set wght but is a low-level escape hatch, not faster or print-only.
Question 19 of 30
You set color-scheme: light dark on :root and use prefers-color-scheme for custom tokens, but a browser forced dark mode breaks your hero section. What is the most targeted fix?
Show the answer
Answer: a · Add color-scheme: only light to the hero section to prevent UA overrides
The only keyword explicitly forbids the UA from overriding an element's color scheme, making it the correct tool to opt a specific component out of a forced dark mode. A prefers-color-scheme media query cannot block browser overrides because it only lets authors react to the user's preference, not control native UI recoloring.
Question 20 of 30
In CSS Grid, how does an auto-sized column behave compared to a 1fr column?
Show the answer
Answer: d · It collapses to the content width and does not fight for leftover space
Auto tracks shrink-wrap to their content's intrinsic width and only absorb leftover space when no fr tracks compete. Distractor B is wrong because auto does not automatically fill remaining space like 1fr, a common misconception the card flags as a red flag.
Read the full bite: CSS Grid: difference between 1fr and auto column sizing?
Question 21 of 30
When a flex container overflows because the sum of flex-basis values exceeds its width, how does the browser determine how much each item shrinks?
Show the answer
Answer: a · Each item surrenders space in proportion to the product of its flex-shrink and flex-basis values.
The flexbox algorithm weights each item's shrink factor by its flex-basis, so larger starting items surrender more of the overflow relative to their siblings. Option D is tempting because flex-grow distributes leftover space by ratio alone, but flex-shrink specifically factors in the starting size to determine how much each item gives up.
Read the full bite: Explain flex-grow, flex-shrink, flex-basis and their interaction
Question 22 of 30
In a grid declared with repeat(auto-fit, minmax(250px, 1fr)), what happens to leftover space in a row after all items are placed?
Show the answer
Answer: a · Existing columns grow to fill the space because auto-fit collapses unused tracks
auto-fit collapses empty tracks so extra space is redistributed to existing columns via 1fr, whereas auto-fill preserves empty tracks that compete for space. Wrapping only occurs when the container cannot satisfy the minimum track size, not after items are placed.
Read the full bite: Create a responsive card grid without media queries
Question 23 of 30
Which properties size tracks the browser generates when items are placed outside the explicit grid?
Show the answer
Answer: c · grid-auto-rows and grid-auto-columns
grid-auto-rows and grid-auto-columns define the dimensions of implicitly created tracks outside the explicit grid. auto-fit and auto-fill are repeat strategies that collapse empty explicit tracks rather than generate new implicit ones.
Read the full bite: Explicit vs implicit grid: how do you control implicit tracks?
Question 24 of 30
In a Flexbox sidebar layout, why does a wide table in the main area sometimes push the fixed sidebar off screen?
Show the answer
Answer: d · The main area defaults to min-width: auto and refuses to shrink below the table width
The correct answer is B because Flexbox items default to min-width: auto, which prevents the main area from shrinking below its content size and pushes the sidebar off-screen. Option A is tempting but wrong because a single-row layout is exactly what Flexbox is designed for, and claiming Grid is always superior is a common red flag.
Read the full bite: Implement a fixed-width sidebar with Flexbox and CSS Grid
Question 25 of 30
In a nested CSS grid, what fundamentally prevents a grandchild element from aligning to the outer grid's tracks without using subgrid?
Show the answer
Answer: b · The inner grid establishes its own independent track list, isolating its children from the parent's grid lines.
The inner grid creates its own independent track list, so its children have no knowledge of the outer grid's lines. Distractor D is tempting because identical fraction values appear to create alignment, but independent track contexts mean the grids remain isolated regardless of the units used.
Read the full bite: What problem does subgrid solve? Give a concrete example.
Question 26 of 30
When a CSS Grid container lacks sufficient horizontal space, how does a fit-content track behave compared to a max-content track?
Show the answer
Answer: a · fit-content is clamped by the container's available space and can compress to min-content, while max-content demands the full unwrapped width even if it overflows
fit-content caps expansion at the container's available space but can still compress to min-content, whereas max-content always takes the content's full unwrapped width regardless of overflow. Option B is tempting because it confuses fit-content with auto, which distributes leftover space and can grow beyond max-content, while fit-content hard-caps growth.
Read the full bite: How do min-content, max-content, and fit-content work in CSS Grid?
Question 27 of 30
When preventing CLS in a responsive CSS Grid of images with known build-time dimensions, which approach is most robust?
Show the answer
Answer: a · Include HTML width and height attributes on images, ensure grid-template-rows respects intrinsic ratios, and use CSS aspect-ratio for dynamic elements
HTML width and height attributes provide the earliest aspect-ratio signal before download, and combining them with grid row sizing plus CSS aspect-ratio for dynamic elements prevents collapse at every stage. Option C is tempting but wrong because aspect-ratio alone lacks the early HTML signal and does not stop grid rows from collapsing to zero before content arrives.
Read the full bite: How can CSS aspect-ratio and modern layout properties prevent CLS?
Question 28 of 30
On a smartphone with a 390 CSS pixel wide screen, how does the viewport meta tag with width=device-width and initial-scale=1.0 affect rendering?
Show the answer
Answer: d · The layout viewport is set to 390 CSS pixels and the page loads at 100% zoom.
width=device-width sets the layout viewport to the screen width in CSS pixels (390), and initial-scale=1.0 loads the page at 100% zoom. Option A describes what happens without the tag, while Option C confuses CSS pixels with physical pixels and incorrectly attributes zoom locking to initial-scale.
Question 29 of 30
In mobile-first CSS, what role do min-width media queries play?
Show the answer
Answer: d · They add layout complexity as the viewport grows
Mobile-first uses min-width queries to progressively enhance the base small-screen styles. The option about hiding desktop elements describes a desktop-first max-width override pattern, which reverses the actual direction of progressive enhancement.
Read the full bite: Explain the mobile-first approach and how it differs from desktop-first
Question 30 of 30
You need a product photo to scale down on mobile but never exceed its natural 800px width on desktop. Which CSS should you use?
Show the answer
Answer: b · max-width: 100%; height: auto
max-width: 100% lets the image shrink within its container but caps it at its intrinsic size, while height: auto preserves the aspect ratio. Using width: 100% instead would force the image to stretch to the full container width, causing it to exceed its original dimensions and become blurry.
Read the full bite: Make an image scale fluidly without exceeding its original size
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.