About CSS3 style for heading 1

Question

Okay, I have one <h1> in my <header> , and one <h1> in my <section>. The first question is why the size of this both <h1> different? I assume that they have their own size depends on their parents tags, which is I'm not certain of it. The second is I have styling this <h1> with external CSS, like:

h1{
   font-size:2em; 
}

tutorial but, the <h1> inside the <header> won't change, only the <h1> inside the <section> make sense. I'm still beginner even in html, so please explain nicely. Thanks in advance.

the h1 in the header most likely has an own style which overrides yours — john Smith, Oct 24 '14 at 09:57
This is why you should us a CSS reset -> https://github.com/premasagar/cleanslate — somethinghere, Oct 24 '14 at 10:02

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Issue demo: http://jsfiddle.net/c06tpb3u

You're not using any CSS reset, which means you're at the browser's mercy and the default Stylsheet.

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}

are the default styles set for h1 heading element

while for section things are getting salty:

h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
    display: block;
    font-size: 1.5em; /*<<<< and the new value*/
    font-weight: bold;
    margin: 0.83em 0;
}
h1 {
    /*display: block;*/
    /*font-size: 2em;*/
    /*font-weight: bold;*/
    /*margin: 0.67em 0;*/
}

so as you can notice (the above is inspecting in FF) that h1 is getting overwritten for h1 being inside section. <heading> element is omitted from that group leaving heading1 at the 2em default font size.

_{Browsers' default CSS for HTML elements

https://developer.mozilla.org/en/docs/Web/CSS/length}

em
This unit represents the calculated font-size of the element. If used on the font-size > property itself, it represents the inherited font-size of the element. This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressed in em.

score 0 · Answer 2 · answered Oct 24 '14 at 10:06

0

To override any CSS add the !important notation to the style..

h1{
   font-size:2em !important; 
}

This will override any of the browsers default CSS.

answered Oct 24 '14 at 10:06

wayzz

585
6
23

`!important` is sign of bad document styling. Should be used wisely. – Roko C. Buljan Oct 24 '14 at 10:09

About CSS3 style for heading 1

2 Answers2