CODEWITHSUNDEEP
htmlcss
Hikikomori
Hikikomori

Reputation: 39

About CSS3 style for heading 1

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.

Upvotes: 0

Views: 86

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

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.

Upvotes: 1

wayzz
wayzz

Reputation: 627

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.

Upvotes: 0

Related Questions