SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 and font-size:

    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:
    Code:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There's nothing 'CSS3' about that code. It's just old fashioned CSS.

    Quote Originally Posted by Toolman55 View Post
    Should this work? Is there a better way?
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Toolman55 View Post
    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:
    Code:
    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
    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. #4
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both, ralph.m and ronpat---
    I applied the "em" and all was well.
    Don

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    The font sizes need a unit of measure.
    Quite true. I was thinking of line height.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Quite true. I was thinking of line height.
    Yes, I thought as much

    Off Topic:

    Bet I've pulled more tricks like that than you have!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •