Question

The following code will set the text of a paragraph inside a .splash-section element to how many pixels? html { font-size: 16px;} .splash-section { font-size: 18px;} .splash-section p { font-size: 1.5rem;} MCQ Options:

a. 18 pixels
b. 24 pixels
c. 27 pixels
d. 36 pixels

Answer 1

The font-size for the paragraph within a .splash-section is determined by the rem unit, which is calculated based on the root element's font-size. Multiplying the base font-size (16 pixels) by the rem size (1.5rem) results in a font-size of 24 pixels for the paragraph.

Step-by-step explanation:

The question is asking to calculate the effective font size of text inside a <p> element which is nested within a .splash-section element.

In the given CSS:

• The global font-size is set to 16 pixels using the html selector.
• For the .splash-section, the font-size is increased to 18 pixels.
• However, the font size for the paragraph within .splash-section is defined in rems (1.5rem), which is based on the root element's font-size, not the parent element's (.splash-section) font-size. Therefore, the size of the text is 1.5 times the root element's font size.

To calculate the actual font size in pixels for the paragraph:

16 pixels (root font-size) x 1.5 (the rem size) = 24 pixels.

Therefore, the text of the paragraph within a .splash-section will be set to b. 24 pixels.