22

general.css

#feedback_bar
{
  /*props*/
}

another.css

#feedback_bar
{
  /*props*/
}

Is this allowed? Will both get inherited?

Chris Muench
  • 17,444
  • 70
  • 209
  • 362

3 Answers3

35

The properties defined last will override properties defined previously. Unless you use !important on the previously defined section of CSS.

.thing {
    padding: 10px;
}

.thing {
    padding: 12px;
}

.thing will have padding: 12px;

.thing {
    padding: 15px !important;
}

.thing {
    padding: 123px;
}

.thing will have padding: 15px;

This is allowed, and to more strictly answer your question, both will indeed be inherited as shown by this example:

.thing {
    padding: 10px;
}

.thing {
    background: red;
}

.thing will have both padding: 10px; and background: red;.

Also, please take a moment to read some of the comments on this answer as they raise good points worth further reading.

Marty
  • 39,033
  • 19
  • 93
  • 162
  • 11
    I think it's worth mentioning that `!important` is intended to be a diagnostic tool--not a solution to sloppy CSS. – jlmakes May 19 '11 at 23:32
  • 1
    @Shango - I also often use `!important` to deal with JS (out-of-my-control) modifying inline styles. –  May 19 '11 at 23:51
2

The one that is loaded last overwrites the previous declaration(s). As for being allowed, css cannot throw errors at you :P. Probably not a good idea though.

Uku Loskit
  • 40,868
  • 9
  • 92
  • 93
  • Indeed, but I like the idea of not rendering a page with errors in style or markup. – NGLN May 19 '11 at 23:39
0

This is allowed, but if there are duplicate properties, the last one will be used.

jeroen
  • 91,079
  • 21
  • 114
  • 132