Using the same CSS rule for all headings

Question

I noticed that Visual Studio 2010 creates a file Site.css in its default project with the following code:

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}


h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

I don't understand why there is a part where the same properties have been set for all headings i.e. h1,h2,h3,etc. and then each of the headings are given properties separately i.e. h1 {/props for h1/} h2{/props for h2/}.
Thanks in advance.

Answer 1

This starts by creating a standardised set of rules for all of the heading selectors, meaning they will all look consistent throughout the whole design.

I imagine visual studio then only overrides the necessary parts of this for the individual selectors. So for example, it wants <h1>s to be bigger so it overrides that with font-size: 1.6em. For <h3> the font size will be 1.2em but the font-variant, font-weight, text-transform etc don't need to be changed, so by setting up a 'standard' at the very beginning of the page, VisualStudio doesn't repeat all of those other styles, only the ones it wants to override.

There are certain things that don't make much sense, such as setting the font-size property on <h2> to 1.5em as this is already done in the standardising rules at the top, but I think this is more of a problem with how VisualStudio was set up to deal with these rules (it's just set up to generate the CSS in that way) as opposed to being something that 'makes sense'. You wouldn't repeat the same rule like that if you were hand-coding your CSS.

I hope that makes some sense :)