Top 30 CSS & Design Systems Concepts Quiz

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.

1. Question 1 of 30

   Which sequence correctly describes the CSS Cascade's tie-breaking process for style conflicts?

   • aImportance, then Specificity, then Source Order
   • bSpecificity, then Origin and Importance, then Source Order
   • cOrigin and Importance, then Specificity, then Source Order
   • dSource Order, then Specificity, then Origin and Importance
   Show the answer

   Answer: c · Origin and Importance, then Specificity, then Source Order

   The cascade first considers the rule's origin and importance (e.g., !important declarations). If still a tie, it then compares the specificity of the selectors. Finally, if all else is equal, the rule defined later in the code (source order) wins.

   Read the full bite: CSS Cascade: How Browsers Resolve Style Conflicts

2. Question 2 of 30

   An HTML div element has id="main" and class="active". Which CSS rule will apply its color?

   • a#main { color: blue; }
   • bdiv.active { color: purple; }
   • cdiv#main { color: red; }
   • d.active { color: green; }
   Show the answer

   Answer: c · div#main { color: red; }

   The rule div#main has a specificity score of 1-0-1 (one ID, one type selector), which is higher than #main (1-0-0), .active (0-1-0), and div.active (0-1-1) when comparing the scores from left to right. The ID column takes precedence over the class and type columns.

   Read the full bite: CSS Specificity: The Browser's Tie-Breaking Rule

3. Question 3 of 30

   An element has width: 200px, padding: 20px, and border: 5px. What is its final rendered width with box-sizing: content-box?

   • a200px
   • b210px
   • c240px
   • d250px
   Show the answer

   Answer: d · 250px

   With box-sizing: content-box, the specified width (200px) applies only to the content area. The padding (20px on each side) and border (5px on each side) are then added outside this content, resulting in a total width of 200 + (2*20) + (2*5) = 250px. Option A (200px) would be the result if box-sizing: border-box were used.

   Read the full bite: CSS Box Model: Every Element is a Box

4. Question 4 of 30

   Why do properties like width, margin, and padding typically not inherit in CSS?

   • aBecause inheriting them would often lead to broken layouts and unusable pages.
   • bThey are always defined directly on elements, making inheritance redundant.
   • cTo ensure better browser rendering performance by limiting inherited styles.
   • dOnly properties that affect an element's visual appearance, like color, are inheritable.
   Show the answer

   Answer: a · Because inheriting them would often lead to broken layouts and unusable pages.

   The card explicitly states that properties like width, height, padding, margin, and border do not inherit because it would usually be undesirable, leading to unusable pages. The other options present plausible but incorrect reasons not mentioned in the card.

   Read the full bite: CSS Inheritance: Styles Flow Downhill

5. Question 5 of 30

   According to the card, what is a key reason to prefer class selectors over ID selectors when styling reusable UI components?

   • aClass selectors have lower specificity, making their styles easier to override and promoting reusability.
   • bThe browser processes class selectors faster than ID selectors, improving performance.
   • cID selectors are primarily used for unique page landmarks, making them unsuitable for reusable components.
   • dClass selectors allow for more complex and nested styling rules.
   Show the answer

   Answer: a · Class selectors have lower specificity, making their styles easier to override and promoting reusability.

   The card explicitly states that ID selectors' "high specificity makes them difficult to override and reduces reusability," while recommending class selectors for "reusable components." Option C is true but does not explain the core reason for preference in terms of styling management.

   Read the full bite: CSS Selectors: How to Target HTML for Styling

6. Question 6 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?

   • ainline
   • bflex
   • cblock
   • dinline-block
   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

7. Question 7 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?

   • apadding-box, to control how padding affects the element's overall size.
   • bmargin-box, to prevent margins from causing overflow issues.
   • cborder-box, as it includes padding within the element's declared width.
   • dcontent-box, as it ensures the content area remains fixed.
   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

8. Question 8 of 30

   What is the primary role of a CSS pseudo-class?

   • aTo group multiple style declarations under a single, reusable name for cleaner code.
   • bTo apply styles to a specific, non-structural part of an element, such as its first line.
   • cTo dynamically change an element's content or attributes based on user interaction.
   • dTo define styles that activate when an element is in a particular state or position, like being hovered over.
   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

9. Question 9 of 30

   When using position: absolute on a child element, why might its direct parent be set to position: relative?

   • aTo establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.
   • bTo ensure the parent element itself is removed from the normal document flow.
   • cTo make the parent element's dimensions automatically adjust to contain the absolutely positioned child.
   • dTo allow the child to adjust its position based on its own original spot within the parent.
   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

10. Question 10 of 30

    According to the card, what is the primary design intention behind CSS margin collapsing?

    • aTo optimize browser rendering performance by minimizing the number of distinct spacing values.
    • bTo ensure a consistent and predictable vertical rhythm in document typography.
    • cTo prevent margins from adding up, thereby simplifying margin calculations for developers.
    • dTo reduce the overall memory footprint required for rendering complex layouts.
    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

11. Question 11 of 30

    What is a direct consequence of CSS pseudo-elements not being part of the standard Document Object Model (DOM)?

    • aThey cannot inherit styles from their parent element.
    • bTheir content is always static and cannot be dynamically generated.
    • cThey cannot be directly selected or manipulated by JavaScript.
    • dThey are rendered by the browser's JavaScript engine, not the CSS rendering engine.
    Show the answer

    Answer: c · They cannot be directly selected or manipulated by JavaScript.

    The card states, "You cannot attach JavaScript event listeners to them, as they are not in the DOM," directly linking their non-DOM status to JavaScript manipulation limitations. Distractor C is incorrect because the card mentions their styles are dynamic, adapting to layout changes.

    Read the full bite: CSS Pseudo-elements: Styling Parts of an Element

12. Question 12 of 30

    Why might an element with z-index: 9999 still appear behind another element with z-index: 10?

    • aThe z-index property is only effective when the position property is set to static.
    • bThe z-index value of 9999 is too high and is treated as auto, which defaults to a lower stacking order.
    • cThe element with z-index: 10 has a transform property applied, which always elevates its stacking order.
    • dThe element with z-index: 9999 is a descendant of an element that established a new stacking context, which itself is stacked below the z-index: 10 element.
    Show the answer

    Answer: d · The element with z-index: 9999 is a descendant of an element that established a new stacking context, which itself is stacked below the z-index: 10 element.

    A new stacking context traps its descendants, meaning they can only stack relative to each other within that context. If the element creating this context is itself stacked below another element (like the z-index: 10 element), its children, regardless of their high z-index, cannot escape to appear above it. Option C is incorrect because while transform creates a stacking context, it doesn't automatically elevate its stacking order above all others; its position is still relative to its parent's context.

    Read the full bite: CSS Stacking Contexts: The Z-Axis Explained

13. Question 13 of 30

    Which common layout issue involving a parent container and its floated child elements is directly resolved by establishing a Block Formatting Context (BFC) on the parent?

    • aThe parent container's width shrinking to fit its content, ignoring the width of its floated children.
    • bVertical margins between the parent container and its adjacent sibling elements collapsing into each other.
    • cThe parent container's text content wrapping unexpectedly around a floated element positioned outside of it.
    • dThe parent container's background or border failing to expand and enclose its floated children.
    Show the answer

    Answer: d · The parent container's background or border failing to expand and enclose its floated children.

    The card explicitly states that a primary use of BFC is to 'contain floats' and gives an example where a parent's border fails to wrap a floated image, which a BFC fixes. While BFCs also prevent margin collapse (Option B), the question specifically asks about issues involving 'parent container and its floated child elements', making float containment the most direct answer.

    Read the full bite: Block Formatting Context: Taming Floats and Margins

14. Question 14 of 30

    Which CSS property, applied to an ancestor with `position: static`, would establish it as the containing block for a `position: absolute` child?

    • aoverflow: hidden
    • bz-index
    • ctransform
    • dposition: relative
    Show the answer

    Answer: c · transform

    The card states that for absolute elements, an ancestor with properties like `transform`, `filter`, or `perspective` will become the containing block, even if its own `position` is `static`. While `position: relative` does create a containing block, it requires the ancestor's position to be non-static, which contradicts the question's premise.

    Read the full bite: CSS Containing Block: The Box That Defines Your Box

15. Question 15 of 30

    Which scenario best highlights the primary advantage of using HSL color values in CSS?

    • aWhen programmatically adjusting color properties like lightness for hover states.
    • bWhen directly defining colors based on screen pixel intensity.
    • cWhen receiving precise color specifications from a graphic designer.
    • dWhen you need to quickly prototype a design with simple, named colors.
    Show the answer

    Answer: a · When programmatically adjusting color properties like lightness for hover states.

    HSL (Hue, Saturation, Lightness) is ideal for programmatic color manipulation, allowing developers to easily create variations like lighter or darker shades. The other options describe the primary use cases for keywords, hexadecimal values, and RGB values, respectively.

    Read the full bite: CSS Color Values: From Keywords to Functions

16. Question 16 of 30

    In which scenario would using the CSS font shorthand property be ill-advised?

    • aWhen you only want to modify font-weight without affecting other inherited font styles.
    • bWhen creating a reusable style for a specific UI component like a button.
    • cWhen setting the default typography for an entire webpage.
    • dWhen you need to explicitly define font-size, line-height, and font-family in one declaration.
    Show the answer

    Answer: a · When you only want to modify font-weight without affecting other inherited font styles.

    The card explicitly states to avoid using the font shorthand when only changing a single property, as it would reset other inherited font styles to their initial values. Options A and C describe recommended use cases for the shorthand, while option D describes its primary function, not a reason to avoid it.

    Read the full bite: CSS `font`: The All-in-One Typography Shorthand

17. Question 17 of 30

    When should you generally avoid using the CSS `background` shorthand property?

    • aWhen the background image needs to cover the entire element without repeating.
    • bWhen you only intend to modify one specific background property of an already styled element.
    • cWhen you need to apply multiple background images to an element.
    • dWhen you are setting a background color and an image simultaneously.
    Show the answer

    Answer: b · When you only intend to modify one specific background property of an already styled element.

    The `background` shorthand resets all unspecified background properties to their default values. Therefore, using it to change only one property on an existing background will inadvertently remove or reset other previously set properties. Options A, B, and D describe scenarios where the shorthand is efficient and recommended.

    Read the full bite: CSS `background`: The All-in-One Shorthand

18. Question 18 of 30

    Given the CSS declaration border-radius: 10px 20px;, which corners will receive a 20px radius?

    • aAll four corners
    • bTop-left and bottom-right
    • cOnly the bottom-right corner
    • dTop-right and bottom-left
    Show the answer

    Answer: d · Top-right and bottom-left

    The card states that with two values, the first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners. Therefore, 20px will be applied to the top-right and bottom-left corners. Option B describes the application of the 10px value.

    Read the full bite: border-radius: More Than Just Rounded Corners

19. Question 19 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?

    • aEnsuring consistent typography across devices versus relying on browser-specific font rendering.
    • bThe ability to use vector-based icon fonts versus traditional text characters.
    • cThe complexity of defining font properties versus the simplicity of pre-installed fonts.
    • dAchieving a unique brand aesthetic versus optimizing for faster page load times.
    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

20. Question 20 of 30

    What is the primary advantage of using CSS gradients for visual effects like button backgrounds over traditional image files?

    • aThey reduce HTTP requests and maintain quality across various screen resolutions.
    • bThey provide better browser compatibility across older web browsers.
    • cThey are exclusively used for background-image properties, simplifying styling.
    • dThey allow for more intricate and detailed visual patterns.
    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.

    Read the full bite: CSS Gradients: Dynamic Images from Code

21. Question 21 of 30

    What happens if the color value is omitted when defining a CSS box-shadow?

    • aThe box-shadow property is ignored, and no shadow is rendered.
    • bThe shadow defaults to the element's own background color.
    • cThe shadow inherits the parent element's computed text color.
    • dThe shadow defaults to a semi-transparent black, mimicking a common default.
    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

22. Question 22 of 30

    Which combination of values is the minimum required to define a single text-shadow?

    • ax-offset, y-offset, blur-radius, and color
    • bx-offset and y-offset
    • cx-offset, y-offset, and blur-radius
    • dx-offset, y-offset, and color
    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

23. Question 23 of 30

    Given `background-image: url('logo.png'), url('pattern.png');` and `background-repeat: no-repeat;`, how does `background-repeat` apply?

    • aThe CSS is invalid because `background-repeat` requires two values for two images.
    • bOnly `pattern.png` will not repeat, as it is the base layer.
    • cBoth `logo.png` and `pattern.png` will not repeat.
    • dOnly `logo.png` will not repeat, while `pattern.png` will repeat by default.
    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.

    Read the full bite: Stacking Multiple Backgrounds in CSS

24. Question 24 of 30

    A developer needs to implement a responsive design that dynamically adjusts font weight and width across various screen sizes while minimizing HTTP requests. Which approach is most effective?

    • aEmploying web fonts from a CDN that automatically optimizes font delivery.
    • bConverting all text elements into raster images to ensure consistent rendering.
    • cLoading separate static font files for each required weight and width variation.
    • dUsing a single variable font file that defines multiple variation axes.
    Show the answer

    Answer: d · Using a single variable font file that defines multiple variation axes.

    Variable fonts allow a single file to contain all variations along axes like weight and width, enabling fine-grained adjustments via CSS without multiple HTTP requests, which is ideal for responsive design and performance. Loading separate static files (Option C) would increase HTTP requests and download size, directly contradicting the goal of minimizing requests.

    Read the full bite: Variable Fonts: One File, Infinite Styles

25. Question 25 of 30

    When should filter: drop-shadow() be chosen over box-shadow for applying a shadow effect?

    • aTo achieve a shadow effect that is easily animated with CSS transitions.
    • bTo ensure the shadow is hardware-accelerated for better performance.
    • cTo apply a shadow that conforms to the irregular shape of an element's content.
    • dTo create multiple shadow layers on a single element with varying properties.
    Show the answer

    Answer: c · To apply a shadow that conforms to the irregular shape of an element's content.

    The card states that filter: drop-shadow() is "the best way to apply a shadow to a non-rectangular shape (like a transparent PNG or an SVG)". While filter is hardware-accelerated, the card also advises that box-shadow is more direct and often more performant for simple rectangular shadows, making option B incorrect as a general preference.

    Read the full bite: CSS Filter: Photoshop-like Effects in the Browser

26. Question 26 of 30

    Which CSS property is most appropriate for combining multiple background gradients and applying a color tint to a background image within a single element?

    • abackground-blend-mode
    • bmix-blend-mode
    • copacity
    • dfilter
    Show the answer

    Answer: a · background-blend-mode

    background-blend-mode is specifically designed for blending multiple background layers (like gradients or images) within a single element, and for applying effects like color tints to background images. mix-blend-mode, while also a blend mode, blends an entire element with the content behind it in the stacking context, not its own background layers.

    Read the full bite: CSS Blend Modes: Photoshop Effects in the Browser

27. Question 27 of 30

    When an element has a clip-path applied, how does it interact with the document flow and surrounding elements?

    • aThe clipped-out regions become transparent and allow surrounding elements to overlap them without affecting their own layout.
    • bThe element's original rectangular box is preserved in the document flow, and surrounding elements behave as if the clipped parts are still present.
    • cIt creates a new, non-rectangular content area, and surrounding elements adjust their positions to avoid the clipped regions.
    • dThe element's bounding box is redefined to match the custom shape, causing surrounding elements to reflow around the new shape.
    Show the answer

    Answer: b · The element's original rectangular box is preserved in the document flow, and surrounding elements behave as if the clipped parts are still present.

    The card explicitly states that "clip-path only hides parts of the element visually; it does not change the element's underlying rectangular shape in the document flow. Other elements will not wrap around your custom shape." This means the element continues to occupy its original rectangular space in the layout. Option D describes a common misconception, as clip-path does not alter the element's box model for layout purposes.

    Read the full bite: CSS clip-path: Break Out of the Box

28. Question 28 of 30

    Which statement correctly describes the primary function of backdrop-filter in CSS?

    • aIt filters all child elements nested within the element to which it is applied.
    • bIt creates a filter effect that is only visible when the element's background is fully opaque.
    • cIt applies graphical effects to the content behind an element, requiring the element itself to be semi-transparent.
    • dIt applies graphical effects directly to the element's own content, similar to the standard filter property.
    Show the answer

    Answer: c · It applies graphical effects to the content behind an element, requiring the element itself to be semi-transparent.

    backdrop-filter is designed to apply effects to the content *behind* an element, acting like frosted glass, and requires the element to have some transparency to reveal the filtered background. It does not filter the element itself; that is the role of the standard 'filter' property.

    Read the full bite: backdrop-filter: Styling What's Behind an Element

29. Question 29 of 30

    When a Flexbox container has flex-direction: column, which statement correctly describes its main and cross axes?

    • aBoth the main and cross axes are horizontal.
    • bThe main axis is horizontal, and the cross axis is vertical.
    • cBoth the main and cross axes are vertical.
    • dThe main axis is vertical, and the cross axis is horizontal.
    Show the answer

    Answer: d · The main axis is vertical, and the cross axis is horizontal.

    The card states that flex-direction sets the main axis, and if flex-direction is column, the main axis becomes vertical, with the cross axis automatically perpendicular, hence horizontal. Option B describes the axis orientation for flex-direction: row, which is a common point of confusion.

    Read the full bite: CSS Flexbox: Mastering the Main and Cross Axis

30. Question 30 of 30

    For which layout scenario is CSS Grid most appropriately used?

    • aArranging a series of buttons in a single, responsive row.
    • bStacking a list of items vertically with consistent spacing.
    • cDesigning a page's main structure with a header, sidebar, and content area.
    • dDistributing words and images within a block of flowing text.
    Show the answer

    Answer: c · Designing a page's main structure with a header, sidebar, and content area.

    The card states that CSS Grid is ideal for the "overall layout of a page, such as creating a classic layout with a header, footer, main content, and sidebars," which aligns with option C. Options A and D describe one-dimensional layouts, for which Flexbox is generally more suitable, and option D is explicitly stated as not being a use case for Grid.

    Read the full bite: CSS Grid: Defining a 2D Layout Container