how to clear all css styles

Question

I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:

<div>
   [implementation of my voting widget]
</div>

I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.

When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?

Regardless of whether it is possible, is there a better solution?

Answer 1

Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):

<div id="votify">
   [implementation of my voting widget]
</div>

#votify {}
#votify ul {}
#votify div span {}
/* etc */