CSS: what does duplicate declaration do?

Question

I am creating a custom theme for wordpress and saw this in the default 2010 style.css file.

#wrapper { margin: 0 auto; width: 940px; } #wrapper { background: pink; margin-top: 20px; padding: 0 20px; } 

now this is the default code (except pink ). when I try to collapse it, which seems logical, it makes a big difference.

that I cannot understand, WHY would you declare the same element twice? I have never seen this before ...

WR!

Answer 1

This is useful if you want to apply common properties to multiple elements. Another useful application is adding style sheets from multiple sources. Example:

 #head, #foot { height: 100px; } #foot { /*Another foot*/ color: red; } 

Second example: CSS from several sources:

 /* External stylesheet: common.css */ body { background: yellow; } /* Inline stylesheet, overrides external stylehseet */ body { background: pink; } 

If two properties have the same specificity, the last declared property will be applied.

Answer 2

It simply overrides previously declared properties.

wrapper will now have a margin:20px auto 0 auto (top right bottom left).