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 not force elements to NOT inherit parent styles.

You can however override all possible styles that you do not want changed. If your CSS specificity is higher than the customers specificity then your styles will be dominate/expressed on the page.

See:

CSS Specificity via css-tricks.com

Per your example using the code below would be more specific than the body declaration and thus override :

.widget .container {
    font-family: Arial;
}