CODEWITHSUNDEEP
htmlcss
Mehdi Haghgoo
Mehdi Haghgoo

Reputation: 3484

Using the same CSS rule for all headings

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.

Upvotes: 3

Views: 12884

Answers (4)

iteles
iteles

Reputation: 889

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 :)

Upvotes: 3

Reeno
Reeno

Reputation: 5705

The first section h1, h2, h3, h4, h5, h6 applies the code to all headings, in the sections below some properties get overwritten for specific tags. So this means, all headings get e.g. color: #666666; and font-weight: 200;. The color stays the same for all headings, but the font-weight of 200 gets overwritten for h2 (600) but not for the other ones. There it stays at 200.

This way, the properties in the first section only have to be written once, not for every heading. The font-size gets specified for all headings, so it could be left out in the first section.

Upvotes: 0

someNameJustToAnswer
someNameJustToAnswer

Reputation: 145

Because in this selector h1, h2, h3, h4, h5, h6 you have properties that equal to all of them, in all other you have property specific to only one selected, maybe that's the case?

Upvotes: 0

arkascha
arkascha

Reputation: 42974

This prevents rules meant to apply to all types of headings to be duplicated. This is a standard way to go. You could as well put the rules from the top set into all specific rule sets. but that be a much longer code and much harder to modify.

The rules inside the top set are applied to all comma separated types of headings. This way you only need to specify such rules further down, inside the specific rule sets, that are specific to this very type of heading.

Upvotes: 0

Related Questions