How does one integrate javascript controls into an existing css site?

This might be a basic CSS question: I have a site designed with well-defined CSS themes. I'm adding some controls (from jquery), but they have the style of their designers, not my site's. What is the easiest way (least amount of work) to make the inserted controls use the site's css rather t开发者_StackOverflow社区han the styles of the control? Is there an easy way to map one set of classes/ids onto another? Or am I missing something basic about css?

---

I'm assuming you're using jQuery UI? If so, they have a ThemeRoller.

---

You can try to "map" things by defining your own widgets and the external ones at the same time as much as possible:

div.my_widget,
div.external_widget

{ border: 1px blue solid; } 

How successful that can be depends heavily on your site's and the controls' structure.

As a general rule, rather change your own stylesheets to work with the control, instead of changing the control to work with your stylesheet. That way, you can easily integrate new versions of the control.

---

Most common way is to inspect the DOM structure of the controls you are adding, and see if you can use the classes applied to style it the way you want, typically be overriding the CSS selectors in place for the control, or by writing CSS for the control DOM structure from scratch.