CSS Mastery Quiz: Test Your Styling Skills! Quiz

1. Position Property Behavior

   In CSS, when you set an element to position: absolute, what is it positioned relative to?

   1. Its closest ancestor element with any position other than static
   2. Its closest ancestor with position: relative only
   3. The first parent element in the HTML
   4. The viewport always
   5. The last child element

2. Centering an Element

   Suppose you want to center an absolutely positioned element both vertically and horizontally within its parent, without using flex or grid. Which solution will correctly center it?

   1. Set top: 50%; left: 50%; and use transform: translate(-50%, -50%)
   2. Just set margin: auto
   3. Only set left: 50% and top: 50%
   4. Use position: static and text-align: center
   5. Apply display: block and margin: 0 auto

3. REM vs EM Units

   What is the main difference between rem and em units in CSS?

   1. rem is relative to root font size, em is relative to parent font size
   2. em is relative to root font size, rem is relative to parent
   3. Both are absolute font sizes
   4. rem and em are exactly the same
   5. rem is only for colors, em is for size

4. Responsive Typography

   Why might you prefer using rem units over px for font sizing in responsive layouts?

   1. rem units scale consistently by changing the root size
   2. px units automatically adjust for device size
   3. rem uses less memory than em
   4. rem is only for background colors
   5. px units respond faster in browsers

5. Box Model Elements

   Which of the following are parts of the CSS box model?

   1. Content, padding, border, margin
   2. Only padding and content
   3. Content and margin only
   4. Padding and margin only
   5. Border and content only

6. box-sizing Property Impact

   What does setting box-sizing: border-box do to an element?

   1. Includes padding and border in the element's total width and height
   2. Excludes border from the element's size
   3. Only sets border width automatically
   4. Makes the element display as an inline-block
   5. Hides padding and margin

7. Inline vs Inline-block

   What is the key difference between display: inline and display: inline-block for an element?

   1. inline-block allows setting width and height; inline does not
   2. inline elements are always floated
   3. inline elements cannot have background colors
   4. inline-block removes all margins
   5. inline-block elements become block-level only

8. Default Position Value

   What is the default value of the CSS position property for most elements?

   1. static
   2. absolute
   3. fixed
   4. relative
   5. block

9. Practical Use of EM

   If a parent element has a font-size of 20px and its child uses font-size: 2em, what will the child’s font size be?

   1. 40px
   2. 10px
   3. 20em
   4. 2px
   5. 24px

10. Absolute Position with No Positioned Ancestor

    If an absolutely positioned element has no ancestor with a non-static position, what is it positioned relative to?

    1. The HTML body element
    2. The nearest span element
    3. The browser window always
    4. The next sibling element
    5. The last child ancestor