title: How to break CSS inheritance?
body: <p>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.</p>
  
  <p>As a result it looks like:</p>
  
  <pre><code>&lt;div class="widget"&gt;
     &lt;div class="container"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.</p>
  
  <p>The problem is when client application styles overwrite the style I applied run time.</p>
  
  <p>For example if client has, it overwrites my styles:</p>
  
  <pre><code>body {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
  }
  </code></pre>
  
  <p>Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.</p>