scope external CSS file for div(no CSS file should link only )

Question

In my page i have three CSS file

bootstrap.css
main.css
icon.css

these are the three file in my page

Function in my page

Answer 1

I believe that bootstrap css will always affect the conetent of divs on the entire page.

To make an area that is not affected, you will need to load the external file into an iframe rather than a div.

Answer 2

You should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).

Your HTML code would look like this:

<div class="page">
    <style scoped>
        @import "style.css";
    </style>
    <!-- Your HTML goes here -->
</div>