Need strategy to have some of page only use specific CSS

So I have a page of HTML that has its own CSS file. It looks exactly like I want it to look when it is in its own HTML with only its own CSS. It's a multi-column, multi-row jqueryui datepicker. The HTML structure basically breaks down to a div with some inner divs and tables within that. Most of开发者_如何学Go the CSS document is from the jquery-ui themeroller and but it has specific tweaks. Most all of the selection is done based on classes.

What I want to do is put this div into another webpage that already has tons of (probably poorly-written) CSS without changing the way it looks. In the CSS for the datepicker, my selections are specific enough not to effect the rest of the page. However, I'm not sure that the existing CSS is specific enough to not effect my datepicker.

What I can do to in my HTML/CSS to ensure that nothing existing touches this div or anything in it?

Before I begin working on any website, I usually reset the CSS.

Most browsers have their own unique default values for elements and they sometimes don't play well with your website.

You can, however, try and override all of these properties to effectively "reset" the CSS.

Yahoo provides a stylesheet you can include, and it even has a "contextual" version, which I am suggesting to you.

Read about it here: http://yuilibrary.com/yui/docs/cssreset/

1 - make sure that your date picker css loads after the rest of the page css - it should then override any 'bad' css on the page

2 - use '!important' in your styles to force an override - not a great solution, but a last resort if nothing else works