CSS3 and font-size:

HTML & CSS
1

Hello;
I have another question. In a tutorial I am following (working with notepad++, HTML5, CSS3, Win7, and IE11) they had us use the following code for the different size headers:


h1{
  font-size:2em;
}
h2{
  font-size:1.6;
}
h3{
  font-size:1.3;
}

I’m not seeing a change take place when I refresh. When I do a search online about the CSS3 font-size property I get conflicting results. I even found a reference on sitepoint that doesn’t match the code I’m showing above.

Should this work? Is there a better way?

Thanks,
Don

2

There’s nothing ‘CSS3’ about that code. It’s just old fashioned CSS. :slight_smile:

It should do something indeed. The h1 should be twice the size of the font on the nearest parent element with a font size declaration. “2em” means 2 x the current font size.

The other two headings don’t have units specified, but normally that means pretty much the same thing as the previous example. They will be 1.6 and 1.3 x the current font size.

3

The font sizes need a unit of measure. {font-size:1.6;} and {font-size:1.3;} are discarded by the CSS as invalid code. The easiest way to fix these is just to add “em”.
FYI: Font sizes can also be expressed as percents. 1.6em is the same as 160%.

4

Thank you both, ralph.m and ronpat—
I applied the “em” and all was well.
Don

5

:lol: Quite true. I was thinking of line height. :blush:

6

Yes, I thought as much :slight_smile:

Off Topic:

Bet I’ve pulled more tricks like that than you have!!! :lol: