Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Thanked 8 Times in 8 Posts

    How to change a heading size relative to its default size?

    Firstly, please excuse my ignorance of CSS - I am mostly a back-end coder!

    To illustrate what I am asking, I have included the following markup:

        <title>Font Size Test</title>
          p { font-size:12px; }
          h1 { font-size:300%; }
          h1.bigger { font-size:120%; }
        <h1>Font Size Test</h1>
        <p>Font Size Test</p>
        <h1 class="bigger">Font Size Test</h1>
    Now, I was hoping that h1.bigger would appear 120% of the size of h1, but instead it appears 120% of the size of p. Of course, to make it appear 120% the size of h1, I would need to use font-size:360%;. Is there a way in CSS for me to specify a font size for h1.bigger relative to h1, rather that p?

    I know what I mean ... I hope I have explained myself clearly enough!

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,300 Times in 1,270 Posts
    Actually the 120% are relative to the font size of a parent element with font size, in this case the (default) body font size.
    You can’t specify a size relative to a default font size of an element unless it’s a child thereof. So, h1.bigger would only be 120% of the usual h1 if it was itself a child of h1. But that’s not valid HTML. So, you’ll always have to specify those sizes as absolute ones (or, relative to the body or any parent element with font size, respectively), when compared to each other.

  3. Users who have thanked VIPStephan for this post:

    XmisterIS (07-05-2013)

  4. #3
    New to the CF scene
    Join Date
    Jul 2013
    Thanked 0 Times in 0 Posts
    Simply use font-size in pixcel and not in percent which will be very easy to manage the size of the parent class font size.


Posting Permissions

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