Apply External CSS to Specific Area

apply external CSS to specific area

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.

Load an external CSS for a specific DIV

CSS applies to entire documents.

If you want to limit the scope, then you need to make use of a descendent selector.

e.g. #id_of_div .the .rest .of .the .selector {}

You have to apply this to every selector, and take into account groups (so it isn't as simple as just prefixing the whole stylesheet and suffixing every })

You would also find the stylesheet for the main document applying to your preview.

A frame would probably be the best approach to solving this problem.

Applying a stylesheet to only a certain region of an HTML file

It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.

See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.

If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:

.bootstrap-styles {
  @import 'bootstrap';
}

/* OR */

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:

<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>

<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>

EDIT

It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.

Here is an example of using both Bootstrap and jQuery UI together:

<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>

<button class="btn btn-primary">Test Button</button>

<div class="bootstrap-ns">
 <button class="btn btn-primary">Bootstrap Button</button>
</div>

<div class="jqui-ns">
 <button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>

<script type="text/javascript">
jQuery(function($) {
    $('#jqbtn').button();
});
</script>
</body>

And the result is this one:

CSS namespaces

As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.

Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/

Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.

Linking an external stylesheet to only specific HTML elements

What you can do is compile your own bootstrap from the source .scss files. See this related post: Limit the scope of bootstrap styles (except you don't actually have to fork bootstrap, that's overkill)

You'll end up with all the bootstrap rules prefixed with a certain selector - in your case, #preview ... so an excerpt of your-custom-bootstrap.css might look like this for you:

#preview .alert {
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  @include border-radius($alert-border-radius);
}

In part of your project files you'll have something like the following:

#preview {
  @import (less) 'bootstrap.css';
}

You'll need to go through the process of setting up the build steps, etc. - take a look at http://getbootstrap.com/getting-started/#grunt

Here's someone who's done this and published it, but I'm not seeing any built assets in their repo so it looks like you'd still have to set up the build tools, but at least it works as a bit of a tutorial: https://github.com/homeyer/scoped-twbs

Link external CSS file only for specific Div

Short answer: no.

Other ideas:

Use CSS preprocessor

.leftmenu {
    @include 'style.css';
}

This uses the nesting capability of CSS preprocessors to pre-qualify all the rules in style.css. Replace the @include with your favorite preprocessor's directive for bringing in another CSS file.

Rewrite CSS manually

You can "namespace" the rules in style.css by changing all the selectors to be preceded by a qualifyng .leftmenu.

Rewrite CSS automatically

You could write JS code to rewrite the stylesheet selectors at run-time to prefix the selectors with the class name, which his essentially what this plug-in does: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin. Or you could do this rewriting on the server, whatever language it's written in.

Use `IFRAME` as sandbox

If the content of the thing you want to apply the styles to can be placed in an iframe, you could add the style.css frame to the HTML loaded in the iframe.

That's about it.

Limit scope of external css to only a specific element?

UPDATE Support for this feature has been dropped. Please seek other options

Original Post:

You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.

The basic idea is

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.

One alternative would be to use an iframe.

Apply different css stylesheet for different parts of the same web page

You can't apply different stylesheets to different parts of a page. You have a few options:

The best is to wrap the different parts of the page in divs with class names:

<div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.

Apply External CSS to Specific Area