I want a div on my page to have the id of header but because the nature of the site requires 3rd party code to be loaded into the page I want the header div to be unaffected by any css other than the css defined explicitly for it via #header { }
Possible? I'd rather not use iframes to seperate it or anything like that.
You would have to set a reset rule for your #header which would redefine all properties you want to protect with the !important next to them to make them override any other rule..
That would be a basic protection, but it can still be overriden.. no way to completely protect it from deliberate attempts to override it .. if you are trying to protect it from mistakes and not deliberate attempts then just add a really obscure classname and style it from the class and not the id selector...
To guarantee that, you'd probably need some sort of CSS reset. As in, think of everything that might affect it and set it to a default value first.
This could get complicated depending on what the CSS for your site looks like. It might be a good idea to refactor your CSS in a way that wouldn't affect stuff in #header{}.
CSS rules have a priority order. The !important and id based rules take the highest priority, so if you can ensure that the id is unique, you wouldn't see any major problems. A quick google search yielded this, http://hungred.com/useful-information/css-priority-order-tips-tricks/. I cann't recollect the actual url though.