CODEWITHSUNDEEP
css
Clay Nichols
Clay Nichols

Reputation: 12139

Does the CSS 'font-size: medium' set font to .Body font size or to the *browser*'s base font size?

in "CSS: The missing manual" the author says that font-size: medium (or other size keywords) sets the font relative to the browser's base font size.

But what I'm seeing in FF2 and IE6 is that it sets the font size to what I specified in the .CSS HTML or BODY style (which is much preferred).

If it works the latter way, this is very handy if you have nested styles and you know you want some text to be the body font-size (i.e., "normal sized text").

Upvotes: 4

Views: 5848

Answers (5)

Aides
Aides

Reputation: 3673

As noted before medium is set by the UA (browser) but you can still get the behaviour you wished by using rem. rem is relative to the root element (notably the <html> element, not the <body>) and thus affected by styling of the root element.

See this fiddle for demonstration.

html
{
  font-size: 60px;
}

#mediumBlock
{
  font-size: medium;
}

#remBlock
{
  font-size: 1rem;
}

#halfRemBlock
{
  font-size: 0.5rem;
}
<div id="inheritedBlock">
  Foobar inherited
</div>
<div id="mediumBlock">
  Foobar medium
</div>
<div id="remBlock">
  Foobar rem
</div>
<div id="halfRemBlock">
  Foobar 0.5rem
</div>

Upvotes: 1

Dennis
Dennis

Reputation: 150

Font Size Keywords (xx-small, x-small, small, medium, etc..) are based on the users default font size which is medium. It can also be used in the term of changing the size of a child element in relation to the parent element.

Upvotes: 0

user4903
user4903

Reputation:

It will be based upon the parent element, so as to respect the cascade. If it is helpful, I always do my font sizes this way:

body {
   font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
   font-size: .85em;
}
li p, td p {
   font-size: 1em;
}

Go 100% on the body, then use em for everything else. I never use "smaller" or "medium" or anything like that. I have more control this way.

Edit:

Please see Jim's comment about "medium" being an absolute font size. Good to note.

Upvotes: 2

Jim
Jim

Reputation: 73936

From the CSS 2.1 specification:

The 'medium' value is the user's preferred font size and is used as the reference middle value.

If a browser doesn't do this, then the browser is buggy.

Upvotes: 5

hugoware
hugoware

Reputation: 36397

I think if you set a default size to a element like a container or the body, then any relative font-sizes in the children are based on the parent elements. Only if you don't specify a font-size anywhere does it just default to the browser (which they all have different sizes at that).

Upvotes: -1

Related Questions