Crack the Code: Advanced CSS Concepts Challenge Quiz

1. Understanding CSS Inheritance

   Which of the following CSS properties is NOT inherited by default by child elements? For example, if a parent u003Cdivu003E sets a value, which property will NOT automatically apply to its children?

   1. A. color
   2. B. font-family
   3. C. border
   4. D. letter-spacing
   5. E. text-align

2. Specificity and Style Conflicts

   Given two selectors with the same specificity, such as '.btn.primary' and '.btn.success', which principle determines which rule is applied if both set the 'background-color' property?

   1. A. The selector with the fewest declarations
   2. B. The selector listed first in the CSS file
   3. C. The selector listed last in the CSS file
   4. D. The selector with more unique pseudo-classes
   5. E. The selector with the most typos

3. Understanding rem and em Units

   If the root element (u003Chtmlu003E) has a font-size of 20px, and a u003Cdivu003E has 'font-size: 2rem;' while a u003Cspanu003E inside it has 'font-size: 2em;', what is the computed font-size for the u003Cspanu003E in pixels?

   1. A. 20px
   2. B. 40px
   3. C. 80px
   4. D. 10px
   5. E. 60px

4. Box Model and Layout Issues

   If two block-level u003Cdivu003E elements each have 'width: 50%;' and you add 'padding: 10px;' to both, what will typically happen to their layout in the default box model ('box-sizing: content-box')?

   1. A. They will sit perfectly side by side within their container.
   2. B. They will overflow or wrap because the sum of widths and paddings exceeds 100%.
   3. C. The padding will be ignored for width calculation.
   4. D. The divs will collapse into a single column.
   5. E. The divs' borders will overlap.

5. Advanced Selectors and Specificity

   Which of the following CSS selectors has the highest specificity? Consider: A) '#nav .item', B) '.menu u003E .item', C) 'li.item', D) 'ul li', E) '* .item'.

   1. A. '#nav .item'
   2. B. '.menu u003E .item'
   3. C. 'li.item'
   4. D. 'ul li'
   5. E. '* .item'