Top 30 CSS Interview Questions and Answers

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

   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?

   • aThe declared width applies only to content, so padding and border add extra width.
   • bThe margin is included in the 25% width calculation.
   • cThe content area shrinks to keep the total at exactly 25%.
   • dThe browser default already includes padding in the 25% width.
   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

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

3. Question 3 of 30

   Which statement correctly explains why an ID selector beats a class selector when they conflict?

   • aThe class rule wins because its CLASS column score of 1 is greater than the ID column score of 0
   • bThe class rule wins if it appears later, since source order overrides specificity when selectors differ
   • cThe ID rule wins because the specificity algorithm compares the ID column first, and 1-0-0 outranks 0-1-0
   • dThe ID rule wins because specificity is a single integer score and an ID is worth 100 points versus 10 for a class
   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?

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

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

   • a10px, because IDs must be unique in the HTML document
   • b10px, because an ID selector has higher specificity than a class selector
   • c20px, because multiple classes can outweigh a single ID
   • d20px, because the class rule appears later in the stylesheet
   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?

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

7. Question 7 of 30

   To perfectly center a child component both horizontally and vertically within its parent using Flexbox, which properties should be applied to the parent container?

   • aposition: 'absolute', top: '50%', left: '50%'
   • bflexDirection: 'row', justifyContent: 'center', alignItems: 'center'
   • cflex: 1, justifyContent: 'center', alignItems: 'center'
   • dflex: 1, alignSelf: 'center', margin: 'auto'
   Show the answer

   Answer: c · flex: 1, justifyContent: 'center', alignItems: 'center'

   Option C is correct because 'flex: 1' makes the parent fill available space, 'justifyContent: 'center'' centers children along the primary axis (vertical by default), and 'alignItems: 'center'' centers them along the cross axis (horizontal by default). Option B is incorrect because setting 'flexDirection: 'row'' would change the primary axis, altering how 'justifyContent' and 'alignItems' center the content relative axes.

   Read the full bite: Flexbox: Responsive Layouts in React Native

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

   • aBlack, because the user-agent selector has higher specificity and specificity always trumps origin.
   • bBlue, because author styles originate from a higher origin than user-agent styles, and origin is evaluated before specificity.
   • cBlue, but only if the author rule is declared later in the stylesheet; otherwise black.
   • dBlack, because user-agent styles are the default and require an author !important rule to override.
   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

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

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

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

    • a50px, because adjacent vertical margins always sum together
    • b20px, because the second element's margin takes precedence
    • c10px, because the smaller margin is absorbed by the larger one
    • d30px, because the larger of the adjacent margins is used
    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.

12. Question 12 of 30

    Which statement correctly distinguishes a pseudo-element from a pseudo-class?

    • aBoth require double colons in modern syntax
    • bA pseudo-class injects new content via the content property
    • cA pseudo-element selects an element by its current state
    • dA pseudo-element styles a part or generated sub-part not present in the DOM
    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

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

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

15. Question 15 of 30

    In a specificity conflict between `#header` and a selector with eleven classes, which statement is true?

    • aThe `#header` selector wins because the ID column outweighs any number of classes
    • bThe eleven-class selector wins because eleven simple selectors outweigh one
    • cThe `#header` selector wins because inline styles are included in the selector score
    • dThe eleven-class selector wins because its specificity sums to a larger integer than the ID
    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?

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

    • a:is() totals the specificity of all arguments, making grouped resets hard to override
    • b:where() has zero specificity, while :is() takes on the specificity of its most specific argument
    • cthe two pseudo-classes behave identically in the cascade and differ only in browser support
    • d:where() has lower specificity than :is() but still carries the weight of an element selector
    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()

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

18. Question 18 of 30

    When styling a news article, how should line-height and letter-spacing differ between body text and headings?

    • aIncrease letter-spacing on body text to improve word shape recognition, and use generous line-height on headings to prevent overlap.
    • bGive body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.
    • cSet body text to tight line-height for a compact style and keep default letter-spacing across all elements.
    • dApply the same line-height and letter-spacing scale to body text and headings so the design system stays uniform.
    Show the answer

    Answer: b · Give body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.

    Body text needs generous vertical rhythm (at least 1.5x) and minimal letter-spacing for comfortable reading, while headings can tolerate tighter values because they are scanned quickly. Option D is a tempting red flag because treating both elements identically confuses vertical rhythm with horizontal spacing and harms readability.

    Read the full bite: Line-height vs letter-spacing: impact on readability and values for body vs headings

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

20. Question 20 of 30

    An element with position: absolute has its offsets computed relative to which box?

    • aThe padding box of the nearest ancestor whose position is not static
    • bThe viewport, regardless of ancestors
    • cThe content box of its direct parent always
    • dThe content box of the nearest block-level ancestor in normal flow
    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.

    Read the full bite: What is a CSS containing block?

21. Question 21 of 30

    When migrating a web-only Sass theme to support both Android and iOS, what is the main reason to adopt design tokens?

    • aBecause tokens are defined in a vendor-neutral format that can generate Android XML, Swift constants, and CSS from one file, while Sass only outputs CSS
    • bBecause design tokens act as runtime CSS custom properties that native apps can read directly from the browser cascade
    • cBecause tokens provide semantic names like color-primary that Sass variables cannot support
    • dBecause Sass variables require a JavaScript runtime to resolve values, making them incompatible with native mobile build pipelines
    Show the answer

    Answer: a · Because tokens are defined in a vendor-neutral format that can generate Android XML, Swift constants, and CSS from one file, while Sass only outputs CSS

    Design tokens use a vendor-neutral format to generate iOS, Android, and web code from one source, while Sass variables compile only to CSS. Distractor C is tempting because it confuses tokens with CSS custom properties, which are runtime web values and cannot produce native mobile deliverables or encode cross-platform aliases.

    Read the full bite: What is a design token versus a CSS or Sass variable?

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

23. Question 23 of 30

    When using a typographic scale, what is the primary negative impact of creating a one-off font size not included in the predefined system?

    • aIt undermines the visual consistency and rhythmic flow that the scale is designed to achieve.
    • bIt prevents the text from being properly optimized for mobile and desktop screens.
    • cIt forces the use of absolute units like 'px' instead of flexible 'rem' or 'em' units.
    • dIt makes the design system's documentation immediately obsolete and unreliable.
    Show the answer

    Answer: a · It undermines the visual consistency and rhythmic flow that the scale is designed to achieve.

    The card explicitly states that creating one-off font sizes is a 'footgun' that 'undermines the entire purpose of having a consistent, rhythmic system.' While other options might be indirect consequences, breaking visual consistency and rhythm is the primary negative impact highlighted.

    Read the full bite: Typographic Scale: A System for Consistent Text

24. Question 24 of 30

    When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?

    • aHSL separates lightness from hue, allowing you to adjust shade with one value.
    • bRGB and HSL are functionally identical, so the choice is purely stylistic.
    • cHSL is more compact than HEX, reducing the size of your CSS files.
    • dHEX does not support transparency, so it cannot create subtle shade variations.
    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

25. Question 25 of 30

    Which approach correctly uses a custom WOFF2 font file to style all headings?

    • aCreate an @font-face rule with only a font-family descriptor, then reference that name in the heading font-family stack
    • bDefine @font-face with a custom font-family name and a src descriptor, then apply that custom name via font-family on heading selectors
    • cSet font-family: 'headings.woff2' on the h1-h6 selectors so the browser downloads and uses the file directly
    • dDeclare @font-face with a src URL, which immediately applies the font to every heading without any extra rules
    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?

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

27. Question 27 of 30

    When building a full-bleed landing page hero, which combination of techniques best prevents layout shift while optimizing image delivery across devices?

    • aApply the image as a CSS background-image with background-size: cover and serve a single 4K JPEG.
    • bUse a picture element with multiple source tags for art direction, CSS object-fit: cover, and omit width/height attributes to allow fluid scaling.
    • cUse an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".
    • dUse an img tag with a single high-resolution WebP source, object-fit: cover, and rely on CSS width: 100% for layout reservation.
    Show the answer

    Answer: c · Use an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".

    This approach reserves space to eliminate CLS, lets the browser choose the optimal resolution and modern format, and prioritizes the likely LCP element. Option A is a common mistake because background-image sacrifices native responsive selection, accessible alt text, and browser optimizations while a single 4K JPEG wastes mobile bandwidth.

    Read the full bite: How would you optimize and implement a full-bleed responsive hero image?

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

29. Question 29 of 30

    What makes rem more predictable than em when sizing text in nested components?

    • arem references the root font size and avoids parent-level compounding
    • bBrowser zoom ensures px and em scale equally well for accessibility
    • crem and em both calculate from the same parent reference point
    • drem is limited to font properties while em applies to any length
    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

30. Question 30 of 30

    Which CSS approach makes a background image completely fill its container while preserving its original aspect ratio?

    • abackground-size: 100% 100%;
    • bobject-fit: cover;
    • cbackground-size: contain; background-repeat: no-repeat;
    • dbackground-size: cover; background-repeat: no-repeat;
    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?