apply external CSS to specific area

Question

I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.

Is it possible to only apply Bootstrap to a region (say a parent div or something?)

Thanks

Answer 1

The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).

HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.

If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.

Answer 2

Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.

Answer 3

I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less

Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.