SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inheritence? Specificity? A question that is driving me insane!!

    Hopefully you guys know the answer and shed some light on this for me!!

    So basic shorthand is this...

    body {
    font: normal normal normal 100%/1.5 Georgia, "Times New Roman", Times, serif;}


    I then took a look at my headers and noticed that they weren't inheriting the normal font weight from the body. They remained bold.

    So then I added a style specifically to h1...

    h1 {font-weight: normal;}

    ...and it changed to normal!

    I thought it was kind of strange so back in body I changed font-style and font-variant...

    body {
    font: normal italic small-caps 100%/1.5 Georgia, "Times New Roman", Times, serif;}


    ...and those seemed to alter all the selectors through inheritance including h1-h6. So then I changed font-weight to bold, and it turns the paragraphs bold. But If I changed the value to normal the paragraphs go back to their normal state but the H1-h6 remain bold.

    Why??? Why aren't my headings becoming the value of normal when adding body {font-weight: normal} to body? Do H1-H6 not inherit that property? Why does it change to normal if I add h1 {font-weight: normal;} to the specific selector?

    Thank you so much for the help in advance!

  2. #2
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Johannesburg, South Africa
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Scotch,

    Chances are you are encountering a problem with the browser's default style-sheet. It is quite likely that the browser's style sheet has a declaration of h1 through to h6 as font-weight:bold; and because of this the browser's rules are more specific than than the body declaration. Thus, when you change the headings you now have a more specific rule.

    Remember the browser will first look at the user-specified stylesheet, then author-specified, and then its own stylesheet, and apply the combined rules of specificity and inheritance.

    You may want to read up on resets, Eric Meyer's post about reset reasoning is a great place to start. It will probably be most helpful if you read it in conjunction with his reset tool itself.

    Hope this helps,
    Trisha

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ScotchTape88 View Post
    I then took a look at my headers and noticed that they weren't inheriting the normal font weight from the body. They remained bold.
    Yup, they do that. Most HTML elements have a default display model, and there will be some things that are inherited and some that are not. All headings are by default displayed in bold - just as they are also displayed in varying degrees of a larger font - unless you specifically tell them not to be.

    Why? As Trisha said, it comes down to the browser styles. Headings have font-weight:bold applied by the browser's built-in stylesheet, which means they don't inherit the font-weight from ancestor elements. Paragraphs, on the other hand, don't have an explicit font-weight, so while they would default to 'normal' as the ultimate fall-back, they will inherit anything else.

    You can force headings to inherit boldness or non-boldness with
    Code:
    h1, h2, h3, h4, h5, h6 {font-weight:inherit;}
    if you really want to!


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
  •