Ace Your CSS Interviews: 10 Challenging Questions Based on Essential Concepts — Questions & Answers

This quiz contains 10 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: Positioning Contexts in CSS

   In a nested layout where a child element has 'position: absolute', what determines the coordinate system against which the child is positioned?

   • The nearest ancestor element with a position other than static
   • The document root always
   • The parent element if it has width and height
   • Any ancestor that uses float property
   • The closest ancestor using display: block
   Show correct answer

   Correct answer: The nearest ancestor element with a position other than static

2. Question 2: Centering Without Flex or Grid

   Which CSS technique correctly centers an absolutely positioned box both vertically and horizontally within its parent, even if the box has its own width and height?

   • Setting 'top: 50%' and 'left: 50%' alone
   • Applying 'top: 50%; left: 50%; transform: translate(-50%, -50%)'
   • Using only 'margin: auto' on the child
   • Applying 'vertical-align: middle' to the parent
   • Setting both 'right: 0;' and 'bottom: 0;'
   Show correct answer

   Correct answer: Applying 'top: 50%; left: 50%; transform: translate(-50%, -50%)'

3. Question 3: Relative vs Absolute Positioning

   If an element with 'position: absolute' has no positioned ancestor (no ancestor with 'position: relative', 'absolute', or 'fixed'), where will it be positioned with respect to?

   • Its direct parent, regardless of positioning
   • The nearest block-level parent
   • The document's body element
   • The root html element
   • The viewport only
   Show correct answer

   Correct answer: The document's body element

4. Question 4: REM vs EM Units

   Which statement correctly describes the difference between the 'em' and 'rem' units in CSS?

   • 'em' and 'rem' always equal the same size
   • 'em' is relative to the root element's font size, 'rem' is relative to the parent element
   • 'rem' stands for random em and varies with each property
   • 'em' is relative to its parent element, while 'rem' is relative to the root element
   • 'rem' is deprecated and should not be used
   Show correct answer

   Correct answer: 'em' is relative to its parent element, while 'rem' is relative to the root element

5. Question 5: Responsive Typography

   How can using 'rem' units, as opposed to 'px', help create a more responsive design for font sizes throughout a web application?

   • 'rem' units ignore root font-size settings in media queries
   • They allow font sizes to scale globally by changing only the root font-size
   • Every element needs its font size set individually with 'rem'
   • 'rem' units are not supported by modern browsers
   • 'px' units automatically scale with viewport changes
   Show correct answer

   Correct answer: They allow font sizes to scale globally by changing only the root font-size

6. Question 6: CSS Box Model Layers

   Which of the following correctly lists the order of the box model components from innermost to outermost for a standard block element?

   • Margin > Border > Padding > Content
   • Content > Padding > Border > Margin
   • Content > Border > Padding > Margin
   • Padding > Content > Border > Margin
   • Border > Content > Padding > Margin
   Show correct answer

   Correct answer: Content > Padding > Border > Margin

7. Question 7: Impact of Box-sizing Property

   How does setting 'box-sizing: border-box' affect the calculation of an element's width and height?

   • Padding and border are added outside the width and height
   • Only border is included in width but not padding
   • Width and height include padding and border
   • Width and height are doubled
   • It has no effect in modern browsers
   Show correct answer

   Correct answer: Width and height include padding and border

8. Question 8: Display Inline vs Inline-block

   What property difference allows 'display: inline-block' elements to be assigned a width and height, whereas 'inline' elements cannot?

   • 'inline-block' elements create a new stacking context
   • 'inline-block' elements remain on the same line but accept box model properties like width and height
   • 'inline' elements inherit text-align from their parent automatically
   • 'inline-block' disables margin and padding
   • 'inline' allows margin-left and margin-right only
   Show correct answer

   Correct answer: 'inline-block' elements remain on the same line but accept box model properties like width and height

9. Question 9: Width of Inline Elements

   If you attempt to set 'width: 200px' and 'height: 100px' on a 'span' element with default 'display: inline', what will happen?

   • Only height will be applied, width is ignored
   • Both width and height are ignored, span only grows to fit its content
   • The span will become a block-level element automatically
   • An error will occur in the browser
   • The span will disappear from the layout
   Show correct answer

   Correct answer: Both width and height are ignored, span only grows to fit its content

10. Question 10: Combining Centering Methods

    Suppose you want to perfectly center a fixed-size box inside a parent, but you are not allowed to use flexbox or grid. Which of the following approaches will always center the child both horizontally and vertically?

    • Setting 'margin: 0 auto' on the child only
    • Using 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)' on the child
    • Setting 'float: center' on the child
    • Applying 'vertical-align: middle' on the parent
    • Setting 'text-align: center' on the parent
    Show correct answer

    Correct answer: Using 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)' on the child