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:

<div class="widget">
   <div class="container">
   </div>
</div>

Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.

The problem is when client application styles overwrite the style I applied run time.

For example if client has, it overwrites my styles:

body {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}

Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.

Answer 1

I don’t think you can break CSS inheritance per se, but you can try to circumvent it by following the rules of CSS specificity. Here’s a good article about Specificity.

As a last resort, 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;
}

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

Note, going the route of adding !important should be a last resort as it’s the ‘nuclear option’ of style specificity.