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!
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 [URL=“http://meyerweb.com/eric/tools/css/reset/”]reset tool itself.
Hope this helps,
Trisha
[font=verdana]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
h1, h2, h3, h4, h5, h6 {font-weight:inherit;}
if you really want to![/font]