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;
}

Answer 2

Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.

A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:

#myWidget *{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

For example. Then, define your overrides specifically.

Answer 3

You could also try inline styling. Inline styling has the highest priority. This will work if client overrides use an imported stylesheet.

Like others have mentioned, another option is !important.

You can also read up the relevant specs at http://www.w3.org/TR/CSS2/cascade.html where they describe exactly how they cascade. If above mentioned tricks don't work, perhaps specs will give you a clue or you will know for certain that this is not possible.

Answer 4

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).

Answer 5

I don't think you can break CSS inheritance per say, but you can try to circumvent it by following the rules of CSS specificity.

A good Specificity article

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Try adding !important to styles in the widget to give it a higher specificity than the default styles.

#myWidget{
    font: 100%/1 "Times New Roman", Serif !important;
}

EDIT

If the client is also using !important it could cause problems. If you could setup jsFiddle.com with an example, we could help find the issue.

I hope that helps!

EDIT2

Note, going the route of adding !important should be a last resort as it's the 'trump card' of style rules.