CODEWITHSUNDEEP
csselement
WhiteRau
WhiteRau

Reputation: 857

CSS: what does a double-declaration do?

i'm building 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 the pink). when i try and collapse it, which seems logical, it makes quite a difference.

what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...

WR!

Upvotes: 5

Views: 1827

Answers (2)

Damon Bauer
Damon Bauer

Reputation: 2726

It just overrides previously declared properties.

wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).

Upvotes: 0

Rob W
Rob W

Reputation: 348992

It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources
Example:

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

Second example: CSS from multiple sources:

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

When two properties have the same specificity, the lastly declared property will be applied.

Upvotes: 4

Related Questions