title: css override all previous styles external to widget
body: <p>I've created a widget that people can use on their site which is working nicely, the problem I have is that some of my css is being modified by previously defined classes on some of those websites, here's what I have:</p>
  
  <pre><code>.widget ul { margin:0; }
  .widget li { margin:0; }
  </code></pre>
  
  <p>This is fine until someone places the widget in a container that already has a different margin for all ul elements, like this:</p>
  
  <pre><code>.container ul { margin:10px; }
  </code></pre>
  
  <p>This ul style is affecting the one on my widget.
  Is there a way to don't allow those previously defined styles to affect mine?</p>