How can you reset CSS headings to the default sizes? - css

Question

How can I reset the sizes of headings to the default sizes? Here's some HTML that I have:
<h2>Hello World</h2>
Here's the CSS for it:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
/*I'd like to reset that height of 16px and use the default browser height */
h2 {
font-size: 100%;
}
I need to override the old h2 selector and reset the headings to the default size? I've Googled this and it said that the heading sizes were browser dependent and I don't want to hard-code the heading sizes.
This is a really basic question I know but somehow I can't wrap my head around what value I need to use to reset the height.

Answer 1

According to A List Apart, the default body font size is 16px (and this is consisent across browsers).
The W3C recommended default stylesheet shows the h2 size as 1.5 em.
Some simple calculation brings us to 16 * 1.5 = 24px.
So, setting your h2 font-size to 24px should do it.

Answer 2

In general, you cannot set a property of an element to its default value except by not setting the property in any author style sheet. Methods suggested for this are based on misunderstandings or on some assumptions about defaults, but the defaults are browser-dependent.

Answer 3

You can use Normalize.css from the beginning and it'll normalize the heading sizes across browsers:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
For example, here is a fix for the <h1> tag:
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}

Answer 4

There isn't a way to go back to the browser's default font-size because everyone does it a little bit differently.
When you change the font size on your h2, it will impact the size of your margins as well (since they are defined in em). I suspect you are trying to modify the font-size to 16px in an attempt to match the margins of other elements that are also specified in em. If this is the case, you will need to set your properties differently:
h2 {
font-size: 1.5em;
margin: .75em 0 0.333em; /* (1 / 1.5) 0 (.5 / 1.5) */
}

Answer 5

The default font-size for headers is medium. See here: https://developer.mozilla.org/en-US/docs/CSS/font-size
So you would do:
h2 {font-size: medium;}

Answer 6

Probably the easiest way to have the heading font-size be set back to default is to remove the font-size declaration from the h2 element you already have, so instead of:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
you will just have
h2 {
margin: 1em 0 0.5em;
}
You will also want to check your style sheets for any other spots a h2 font-size might be declared. If you can't or don't want to remove the font-size delcaration you can do the following to reset the font-size for all h2 elements to default
h2 {
font-size: medium !important;
}
The font-size of medium is the default value for all browsers and the !important at the end makes it override all other declared styles. You need to be careful using important though because it makes it much harder to determine how a style is going to cascade through the elements and/or how it is being applied.
Cheers and how this helps.
Source for default value: http://www.w3schools.com/cssref/pr_font_font-size.asp