How to break CSS inheritance?

Question

I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.

As a result it looks like

Answer 1

You can't break style inheritance as such, but you can ensure that your styles are either more important or loaded in the right order so yours comes out on top.

Have a look at the !important tag.

Alternatively if you load your stylesheets after theirs yours will take precedent (unless theirs is inline). You can use Javascript to load your styles after the body has loaded (But then you'd get a "flicker" effect).