so rem points to font-size at root element (html element…) but will it work just as well if I set it for body element instead? or does it have to be “absolute” root (html)?
thank you…
and if I set rem font-size for, say a div, then how does that work exactly?
if I do, say, div{font-size:1.2rem;}?
div is not the root element, so how does that apply?
(or is rem used only for root element and just em for the rest of the elements?)
thank you…
Basically, if you set a font size on the body element, anything you set in rems will be based on that body font size. So a div set to font-size: 1.2rem will be 1.2 times the size of the body font size.
You don’t set rem units for the html element itself but instead the rem units that you set on the items in your page will be relative to the font-size that you set on the html element.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {font-size:100px}
div { font-size:2rem}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
The div will be 200px font-size even if you set the body element to 12px.
You’d think so wouldn’t you but that’s not how it works. 
The body size is ignored as far as rems are concerned and its the html element’s font-size that is taken into account.
e.g. What size do you think the div and the p will be?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {font-size:200px}
div { font-size:2rem}
p{font-size:4rem}
</style>
</head>
<body>
<div>test</div>
<p>test</p>
</body>
</html>
If you thought they were 400px and 800px respectively you would be wrong. They will be 32px and 64px respectively assuming the default font-size is 16px. It’s the html element’s font-size that dictates how rems are calculated.
Thanks for setting me straight, Paul. Dayang, I thought I had tested it, but I guess I normally use font-size: 100% on the body element anyway, so deceived myself. 
(That’s what you get for not actually reading up on these things.)
[FONT=Verdana]
thank you all for the useful responses…
so Paul, just one thing:
They will be 32px and 64px respectively assuming the default font-size is 16px. It’s the html element’s font-size that dictates how rems are calculated.
but in your example there’s no font size set for HTML element…
(so if you don’t set font-size for HTML element, it’s the browser’s default font-size setting that applies? even if you set it for the BODY element? man, this is turning out more complex than I thought…)
thanks again… I will certainly check out the link you posted…
[/FONT]
[FONT=Verdana]
look at example here,
(in rem-sizing section):
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
-
62.5% of WHAT?
-
how does he arrive at 14px and 24px?
thank you…
[/FONT]
His calculations make the same presumption as Paul described… that the default font-size of the browser is 16px (and it may not be, of course).
16px x 62.5% = 10px
10px x 1.4rem = 14px
10px x 2.4rem = 24px
Flawed logic at best. The technique is generally favored by former print designers and anyone else who used pixels (or points) as units of measure for fonts for years.
but in your example there’s no font size set for HTML element…
Just remember that rems are based on whatever font size the html element is whether you set that yourself or you just leave it to user defaults. You can set the html element to 20px and then your rems will be calculated assuming a base size of 20px.
However its best not to upset your users so leave the default alone and use ems or rems and then just size your page in respect to whatever the default is going to be and assume that you have no control over the base size but you do have a control over the relationship between the fonts on your page.