CSS Mastery Challenge: Advanced Interview Questions — Questions & Answers

This quiz contains 5 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Box Model Calculation Scenario

   If a CSS element has width: 300px, padding: 20px, border: 5px solid, and margin: 10px, with box-sizing set to content-box, what will be the total width of the rendered element (excluding margin)?

   • A. 350px
   • B. 370px
   • C. 330px
   • D. 310px
   • E. 300px
   Show correct answer

   Correct answer: B. 370px

2. Question 2: Display Values and Width Example

   Given a span element styled with display: inline and width: 200px, how will its width be rendered in the browser?

   • A. It will expand to 200px as specified
   • B. It will ignore the width property and fit its content
   • C. It will throw a CSS error and not be rendered
   • D. It will expand to the parent container’s width
   • E. Its width will be halved due to being inline
   Show correct answer

   Correct answer: B. It will ignore the width property and fit its content

3. Question 3: Advanced Positioning and Stacking

   If two absolutely positioned elements overlap and one has z-index: 5 while the other has z-index: 10, which element will appear on top and why?

   • A. The element with z-index: 5, because it is positioned first in the HTML
   • B. The element with z-index: 10, because a higher z-index takes precedence
   • C. Both elements will alternate visibility due to stacking context
   • D. The stacking order will be random
   • E. The z-index property only works on statically positioned elements
   Show correct answer

   Correct answer: B. The element with z-index: 10, because a higher z-index takes precedence

4. Question 4: Flexbox vs Grid Use Case

   If you need to design a layout with both complex rows and columns, such as a multi-directional dashboard, which CSS layout model is more suitable and why?

   • A. Flexbox, because it handles two-dimensional layouts by default
   • B. Grid, because it supports both row and column alignment simultaneously
   • C. Flexbox, since it has superior item alignment options
   • D. Absolute positioning, to manually define each section
   • E. Inline-block, for more precise control of each cell
   Show correct answer

   Correct answer: B. Grid, because it supports both row and column alignment simultaneously

5. Question 5: Specificity Calculation Exercise

   Given the following selectors: ‘#main .nav li.active’, ‘.nav .active’, and ‘li.active’, which selector has the highest specificity and why?

   • A. ‘li.active’, because it has the most simple selectors
   • B. ‘.nav .active’, because class selectors have the highest specificity
   • C. ‘#main .nav li.active’, because ID selectors give the highest specificity
   • D. All three selectors have equal specificity
   • E. ‘li.active’, because active states take precedence
   Show correct answer

   Correct answer: C. ‘#main .nav li.active’, because ID selectors give the highest specificity