Question

For the following style rules, what is the font size of the h1 heading in pixels?

body {font-size: 16px;}

body > article {font-size: 0.75em;}

body > article > h1 {font-size: 1.5em;}

1. 16px;

2. 12px;

3. 18px;

4. 18.25px;

Answer 1

Hello Student,

The correct answer is 18px.

-------------------------------------------------------------------------------------------------------------------------------------------------------

Explanation -

In CSS we define font size in many ways, here for h1 heading it is defined in format of em which is always relative to its parent font size.

Here we have:

Formula to convert em into px:

px(size of element in px) = em(size of same element in em) * px(size of parent in px)

Body font size = 16px

h1 font size = 1.5em

h1 heading font size = 0.75em

we have to convert this 0.75em into px.

So, the calculation is:

=> 16px * 1.5em = 24px (parent font size for h1 heading)

Thus, the h1 heading font size in pixel is

=> 24px * 0.75em = 18px

And not the other options like 16px, 12px ,18.25px.

---------------------------------------------------------------------------------------------------------------------------------------------------------

THANK YOU!

LIKE THE ANSWER IF IT HELPED YOU