Top 30 Intermediate CSS & Design Systems Concepts Quiz
30 intermediate multiple-choice CSS & Design Systems concept questions, the mechanics underneath the basics: how the pieces relate and where the usual mental model stops holding. They come from 30 bites in the CSS & Design Systems library, the middle slice of the 169 CSS & Design Systems concept questions in the 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
Which CSS display value allows an element to flow horizontally with surrounding text while still permitting explicit control over its width and height?
Show the answer
Answer: d · inline-block
Inline-block elements combine the characteristics of inline elements by flowing horizontally with text, and block elements by allowing explicit width, height, and vertical margin/padding. Inline elements flow horizontally but ignore width/height, while block elements take a new line.
Read the full bite: CSS 'display': How Elements Occupy Space
Question 2 of 30
You set two elements to "width: 50%" and add "padding: 10px". To guarantee they fit side-by-side without wrapping, which box-sizing value is best?
Show the answer
Answer: c · border-box, as it includes padding within the element's declared width.
With border-box, the element's declared width (50%) includes its padding, ensuring it occupies exactly 50% of the parent's space. content-box, the default, would add the padding outside the 50% width, making each element wider than 50% and causing them to wrap.
Read the full bite: CSS box-sizing: Predictable Element Sizing
Question 3 of 30
What is the primary role of a CSS pseudo-class?
Show the answer
Answer: d · To define styles that activate when an element is in a particular state or position, like being hovered over.
Pseudo-classes are designed to style elements based on their temporary state or structural position, such as when a user hovers over them or when an input is invalid. Option B describes pseudo-elements, which style specific parts of an element, a key distinction mentioned in the card.
Read the full bite: CSS Pseudo-classes: Style Elements Based on State
Question 4 of 30
When using position: absolute on a child element, why might its direct parent be set to position: relative?
Show the answer
Answer: a · To establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.
Setting a parent to position: relative creates a positioning context, ensuring that its position: absolute children will position themselves relative to that parent. This prevents the absolutely positioned child from positioning relative to the <body> or another distant ancestor. Position: relative on the parent does not remove it from the normal document flow.
Read the full bite: CSS Positioning: Taking Elements Out of Normal Flow
Question 5 of 30
According to the card, what is the primary design intention behind CSS margin collapsing?
Show the answer
Answer: b · To ensure a consistent and predictable vertical rhythm in document typography.
The card explicitly states that margin collapsing "was designed to create consistent vertical rhythm in documents." While it does prevent margins from adding up, that is a mechanism to achieve the primary goal of aesthetic consistency, not the goal itself.
Read the full bite: CSS Margin Collapsing: The Largest Margin Wins
Question 6 of 30
What is the primary trade-off a developer considers when deciding between a custom font via @font-face and a standard system font?
Show the answer
Answer: d · Achieving a unique brand aesthetic versus optimizing for faster page load times.
The card emphasizes that @font-face is used for specific branding and aesthetics, but warns that "Every custom font adds to the page weight and increases load time." This highlights the core trade-off between design uniqueness and performance. While defining @font-face adds some CSS, the primary decision factor is not the syntax complexity, but the impact on user experience due to load times.
Read the full bite: @font-face: Ship Custom Fonts with Your CSS
Question 7 of 30
What is the primary advantage of using CSS gradients for visual effects like button backgrounds over traditional image files?
Show the answer
Answer: a · They reduce HTTP requests and maintain quality across various screen resolutions.
The card states CSS gradients solve issues like added HTTP requests, increased page weight, and pixelation on high-DPI screens by generating effects directly in the browser. Option D is incorrect because the card advises against using gradients for complex, photorealistic textures.
Question 8 of 30
What happens if the color value is omitted when defining a CSS box-shadow?
Show the answer
Answer: c · The shadow inherits the parent element's computed text color.
The card explicitly states that omitting the color causes the shadow to inherit the parent element's text color, which is a common 'footgun' or pitfall. It does not default to black, become ignored, or inherit the background color.
Read the full bite: CSS box-shadow: Creating Depth and Elevation
Question 9 of 30
Which combination of values is the minimum required to define a single text-shadow?
Show the answer
Answer: b · x-offset and y-offset
The card explicitly states that 'Each shadow is defined by at least two required length values: offset-x and offset-y.' While blur-radius and color are frequently used, they are optional parameters.
Read the full bite: CSS text-shadow: Adding Depth and Legibility to Text
Question 10 of 30
Given `background-image: url('logo.png'), url('pattern.png');` and `background-repeat: no-repeat;`, how does `background-repeat` apply?
Show the answer
Answer: c · Both `logo.png` and `pattern.png` will not repeat.
The card states that if fewer values are provided for a background property than there are images, the browser repeats the list of values. Therefore, the single `no-repeat` value applies to both images. It is not invalid to provide fewer values, nor does it apply only to the first or last layer.
Question 11 of 30
For which layout scenario is explicit item placement in CSS Grid most suitable?
Show the answer
Answer: c · Structuring the main regions of a webpage, such as the header, navigation, and main content.
The card states that explicit placement is ideal for foundational layout elements like a page's header, sidebar, and main content. Options A and B describe scenarios better suited for CSS Grid's auto-placement feature, while option D is typically handled more simply with Flexbox for single-dimension layouts.
Question 12 of 30
Which constraint is crucial to avoid errors when defining a layout with grid-template-areas?
Show the answer
Answer: d · All named areas within the layout must form a complete rectangular shape.
The card explicitly states that the 'biggest footgun' is that 'named areas must form a perfect rectangle, or the layout breaks.' Option A is incorrect because a period (.) can be used for empty cells, and a single name can span multiple cells if they form a rectangle.
Read the full bite: CSS Grid-Template-Areas: Draw Your Layout in CSS
Question 13 of 30
How do CSS Logical Properties primarily enhance the internationalization of web layouts?
Show the answer
Answer: a · By automatically adjusting flow-relative properties (like inline-start) to match the document's writing direction.
Logical properties like margin-inline-start automatically map to the correct physical direction (e.g., left or right) based on the document's writing-mode, ensuring layouts adapt seamlessly to different text directions. Option B describes a language-specific CSS approach, which logical properties aim to minimize.
Read the full bite: CSS Logical Properties: Layout That Speaks Every Language
Question 14 of 30
Which statement correctly describes a specific behavior or rule when using the minmax() function in CSS Grid?
Show the answer
Answer: c · If the resolved maximum value is smaller than the minimum, the maximum value is ignored, and the minimum is used.
The card states, "If the resolved max value is smaller than the min, the max is ignored and the min value is used." Option A is a common misconception, as the 'fr' unit is only valid for the maximum argument, not the minimum.
Read the full bite: CSS minmax(): Flexible Sizing for Grid Tracks
Question 15 of 30
What is a key condition that prevents the `aspect-ratio` property from having any effect on an element?
Show the answer
Answer: a · Both the element's "width" and "height" are explicitly defined with fixed values.
The card states that `aspect-ratio` has no effect if both width and height are explicitly set with fixed values, as there is no `auto` dimension for the browser to calculate. While it's not recommended when height is content-driven (Option B), that doesn't inherently prevent the property from attempting to apply.
Read the full bite: CSS aspect-ratio: Maintain Shape in Responsive Layouts
Question 16 of 30
When setting global layout dimensions like margins and padding, what is the key advantage of "rem" over "em"?
Show the answer
Answer: c · "rem" scales consistently from the root element, preventing size compounding in nested structures.
The card explains that "rem" bases its size on the root element's font size, providing consistency and predictability across the UI and avoiding the compounding effect that "em" can cause in nested layouts. While "em" does scale proportionally to its parent's (or its own) font size, this behavior makes it unsuitable for consistent global spacing in complex, nested UIs.
Question 17 of 30
Which of the following best explains why using "width: 100vw;" can lead to an unwanted horizontal scrollbar?
Show the answer
Answer: b · It includes the space occupied by the browser's vertical scrollbar in its calculation.
The card explicitly states that "100vw is the entire window width, including the space taken by the scrollbar itself," which causes overflow. Option D is incorrect because viewport units are relative to the browser window, not the physical screen.
Read the full bite: Viewport Units: Sizing Against the Browser Window
Question 18 of 30
Which scenario best exemplifies the "art direction" capability provided by the HTML <picture> element?
Show the answer
Answer: d · Displaying a different visual composition of an image, such as a zoomed-in crop for mobile and a wider shot for desktop.
The <picture> element's art direction capability allows developers to serve entirely different image content or compositions based on conditions like viewport size, which option D describes. While option C is a valid use of <picture> for format optimization, it does not involve changing the visual content or composition of the image itself, which is the essence of art direction.
Read the full bite: The <picture> Element: Art Direction for Images
Question 19 of 30
What is the primary role of the "sizes" attribute when used with "srcset" for responsive images?
Show the answer
Answer: d · To inform the browser about the intended display width the image will occupy at various viewport sizes.
The sizes attribute tells the browser how wide the image will be displayed on the screen at different viewport sizes, allowing it to select the most appropriate image from the srcset. Option C describes the function of the width descriptors within the srcset attribute, not the sizes attribute.
Read the full bite: srcset and sizes: Responsive Images in HTML
Question 20 of 30
Which scenario is best suited for using object-fit: contain?
Show the answer
Answer: a · Ensuring a company logo is fully visible within a small icon box.
object-fit: contain scales the content to fit inside the box while preserving its aspect ratio, ensuring the entire image is visible, which is ideal for logos. Options A and C describe use cases for object-fit: cover, while option B describes object-fit: fill.
Read the full bite: CSS object-fit: Control How Images Fill a Box
Question 21 of 30
Which scenario best demonstrates the necessity of using CSS keyframe animations over CSS transitions?
Show the answer
Answer: b · Creating a loading spinner that continuously rotates and changes color through several distinct hues.
Keyframe animations are designed for multi-step sequences with intermediate states, such as a loading spinner with continuous rotation and color changes. Simple CSS transitions are limited to animating between two distinct states.
Read the full bite: CSS Keyframe Animations: Multi-Step Motion Control
Question 22 of 30
For an element entering the screen, why is "ease-out" typically a better choice than "ease-in"?
Show the answer
Answer: a · "ease-out" begins quickly and then slows down, guiding attention and smoothly settling the element.
The card explains that "ease-out" starts fast and then gently slows to a halt, which is ideal for elements entering the screen to grab attention and allow comfortable processing of the final state. Conversely, "ease-in" would feel sluggish as it starts slow and speeds up, which is not suitable for an element appearing on screen.
Read the full bite: CSS Cubic-Bezier: The Art of Animation Pacing
Question 23 of 30
A developer animates a notification sliding into view. To ensure it remains visible after the animation completes, which animation-fill-mode value should be applied?
Show the answer
Answer: d · forwards
The 'forwards' value ensures the element retains the styles from the last keyframe after the animation completes, preventing it from snapping back to its original state. 'none' is the default and would cause the notification to revert to its off-screen position.
Read the full bite: animation-fill-mode: Hold Styles Before and After Animation
Question 24 of 30
A developer applies `transform: rotateY(45deg);` to an element, but it still appears to skew in 2D rather than rotate in 3D. What is the most likely missing CSS property?
Show the answer
Answer: b · perspective on a parent element
The card states that forgetting to set `perspective` on a parent makes 3D movement look like a flat 2D skew. Without `perspective`, the browser cannot establish the necessary depth for true 3D rendering. `transform-style: preserve-3d` is for children to participate in the parent's 3D space, not for the parent's initial 3D appearance.
Read the full bite: CSS 3D Transforms: Adding Depth to the DOM
Question 25 of 30
How does the numerical value of the CSS perspective property influence the perceived depth of 3D transformed elements?
Show the answer
Answer: c · A smaller value results in a more dramatic and distorted 3D appearance.
The card explicitly states that "a smaller value creates a more dramatic effect" and "small values cause a large transformation," akin to pressing your face close to a screen. Option A is a common misconception, as a larger perspective value simulates a greater distance from the viewer, resulting in a flatter, less distorted 3D scene.
Question 26 of 30
What is the fundamental mechanism by which SMACSS helps manage CSS scalability in large projects?
Show the answer
Answer: d · It introduces a system of categorizing CSS rules based on their purpose, using specific naming conventions.
SMACSS's core approach is to categorize CSS rules into five distinct types (Base, Layout, Module, State, Theme) and use naming conventions (like prefixes) to clarify their purpose, preventing styles from bleeding into each other. Option B describes automatic scoping, which is a feature of modern JavaScript frameworks, not SMACSS itself, which relies on convention.
Read the full bite: SMACSS: A Naming Convention for CSS Scalability
Question 27 of 30
Which approach do CSS Modules primarily use to achieve local scope for styles and prevent naming conflicts?
Show the answer
Answer: c · They automatically transform local class names into unique, globally safe identifiers during the build process.
CSS Modules achieve local scope by automatically generating unique, globally safe class names for your local CSS classes during the build process, preventing conflicts. While BEM is a naming convention to manage global CSS, CSS Modules automate the uniqueness, making manual conventions less critical for preventing collisions.
Read the full bite: CSS Modules: Local Scope for Your Styles
Question 28 of 30
When should a team accept CSS-in-JS's runtime cost?
Show the answer
Answer: d · When building many reusable components whose styles depend on runtime state
CSS-in-JS trades runtime overhead for scoped, dynamic component styles, so it is justified when components are reusable and state-dependent. Option B is tempting because it names the exact collision problem CSS-in-JS solves, but achieving that scoping inherently requires adding JavaScript to the bundle.
Question 29 of 30
How does Styled Components primarily address the issue of style conflicts in large applications?
Show the answer
Answer: a · It generates unique, encapsulated class names for each styled component at runtime.
Styled Components automatically generates unique class names for each component, preventing the global scope issues and style collisions common in traditional CSS. While some CSS-in-JS solutions can extract styles at build time, the core mechanism for conflict prevention in Styled Components involves runtime generation of unique class names.
Read the full bite: Styled Components: CSS-in-JS as Components
Question 30 of 30
What is the fundamental approach Tailwind CSS takes to styling web interfaces?
Show the answer
Answer: c · It provides low-level utility classes that directly apply individual CSS properties.
Option C correctly describes Tailwind's core philosophy of providing granular, single-purpose utility classes that directly translate to CSS properties. Option B describes a component-based framework like Bootstrap, which the card explicitly contrasts with Tailwind's utility-first approach.
Read the full bite: Tailwind CSS: Styling Directly in Your HTML
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.