8

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

  • Am using Onload ,Onclick function
  • when i click a link a external HTML file will load
  • the external file has its own CSS file named style.css

    ERROR

when external file is loaded it links with bootstarp.css how to stop external file link with this file external file will load in 

<div class="page">
<!--/external file loading place-->                
</div>

how do i link style.css to the class="page"

  • And no other CSS file should link insideclass="page"
  • Why don't you copy the CSS rules of .page the linked style.css in your main.css ? – enguerranws Oct 15 '14 at 18:04
  • BTW, what is bootstarp ? :) – enguerranws Oct 15 '14 at 18:05
  • @enguerranws External file is form and when i link with style.css in main.css file totally my form design get wrong so i need to scope CSS file for div –  Oct 15 '14 at 18:09
  • You can't "scope" CSS file. You can select element to apply the rules to (with CSS specificity). So if you load a form in a div (e.g. with Ajax), you should put the style of this form in your main CSS file. – enguerranws Oct 15 '14 at 18:13
  • is it possible to post the code in fiddle, there is option in html5 using ids, but it is possible only if i see your code, or URL – Manjunath Siddappa Oct 15 '14 at 18:25

2 Answers2

11

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>
ncardeli
  • 3,452
  • 2
  • 22
  • 27
  • When i try your method i get ERROR showing unexpected token IMPORT_SYM found –  Oct 15 '14 at 18:15
  • @user3700339, so you previously tried this method? You should have added that information to your question. Where do you get that error? From the browser Javascript console? Did you try it with the JQuery plugin I suggested? – ncardeli Oct 15 '14 at 18:18
  • The syntax, at least for a .Net app requires a double "@" before import. Just a heads up to those who may not know. – Debacle Apr 17 '17 at 18:52
2

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.

tomf
  • 449
  • 4
  • 13
  • when i load with iframe the iframe has vertical and hozizontal scrol bar how do i load iframe load with full with wnd height of external file –  Oct 15 '14 at 18:13
  • To make the iframe the same size as the containing document: if the content you are loading is from the same domain, this should help (http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using) otherwise take a look at this (http://stackoverflow.com/questions/5589756/is-there-a-cross-domain-iframe-height-auto-resizer-that-works) – tomf Oct 15 '14 at 21:28