CODEWITHSUNDEEP
htmlcss
user2658578
user2658578

Reputation: 365

what does this mean Inheritance Uses Computed Values

I'm reading this article and in chapter "Inheritance Uses Computed Values" they say the following:

This is important for inherited values like font sizes that use lengths. A computed value is a value that is relative to some other value on the Web page.

If you set a font-size of 1em on your BODY element, your entire page will not be all only 1em in size. This is because elements like headings (H1-H6) and other elements (some browsers compute table properties differently) have a relative size in the Web browser. In the absence of other font size information, the Web browser will always make an H1 headline the largest text on the page, followed by H2 and so on. When you set your BODY element to a specific font size, then that is used as the "average" font size, and the headline elements are computed from that.

So if you have set text size in the browser to normal that 1em is about the same as 16px. If you know choose to set a greater text size in browser the text will be greater.

So I wonder what are they trying to say with the article?

Upvotes: 0

Views: 78

Answers (2)

MarcinJuraszek
MarcinJuraszek

Reputation: 125630

It means, that when you set font-size on element it's real value is related to values set in parent elements.

Example: DEMO

<div id="test1">
    <h1>First header</h1>
</div>
<div id="test2">
    <h1>Second header</h1>
</div>

h1 { font-size: 1.5em; }

#test1 { font-size: 1em; }
#test2 { font-size: 2em; }

font-size: 1.5em on h1 element is calculated relatively to it's parent and the second heading is bigger.

Upvotes: 1

kangoroo
kangoroo

Reputation: 359

It's basically saying it's all relative, so let's say your body is 16px, unless you specify specifically everything will be computed from this value for other tags.

if you use em, then 1em will be 16px for the top elements.

Example:

<div class="monkeyAss">Hello
<h1>monkeyAss2</h1></div>

.monkeyAss {font-size: 0.5em;}
.monkeyAss h1 {font-size: 1em}

Here your monkeyAss will be as expected 8px, for 1em, but then since h1 is inside another parent div, it's going to be also 8px, taking its value from its relative parent. hope that helps.

Upvotes: 0

Related Questions