CSS Styles - how does overriding background work?

Question

There's a pile of questions with related sounding titles, but I didn't see my answer for this question in case anyone is checking (feel free to leave a reference though!).

This is more out of inexperience than anything... but if I have a global stylesheet that sets the CSS properties of a class div.rowpic , and then I do this:

<div class="rowpic" style="background-image: url('whatever.jpg');"> ... </div>

Can I reliably expect browsers to use the full CSS specification of div.rowpic but replace its background image with the style I explicitly stated in this div tag?

Answer 1

Yes, that's what should happen.

Style in the element overrides the definition of the style in the declared CSS('s).

Each property of the styling is applied independently from the others, so even if you import another CSS after that one that has the same class but only redefines some of the selectors, you still get the remaining ones applied from the first CSS.

Answer 2

Of course. In this case, the background image will be replaced since inline styling rule is more important of css styling rules.

Please read this article about CSS specificity: http://css-tricks.com/855-specifics-on-css-specificity/