21

general.css

#feedback_bar
{
  /*props*/
}

another.css

#feedback_bar
{
  /*props*/
}

Is this allowed? Will both get inherited?

Chris Muench
  • 17,552
  • 67
  • 200
  • 345

3 Answers3

33

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
  • 38,275
  • 19
  • 91
  • 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. – None 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
  • 39,250
  • 9
  • 87
  • 91
  • 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
  • 90,003
  • 21
  • 112
  • 129