Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name
. See how jQuery UI does it (.ui-widget input
).
Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 }
as it can cause headaches.
As long as you do
#uniqueId a {
property: value;
}
The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.