Div with External Stylesheet

Div with external stylesheet?

The IFRAME solution works like this:

In your main HTML file, you'll have your DIV:

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>

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.

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.

How to link external css file affecting only on 1 div and unaffecting all other divs

I think that one solution could be to add a class "without-mdb" to your form and add ":not(.without-mdb)

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

Selectively apply stylesheets to div

- 1

Take a look at this:
https://stackoverflow.com/a/17668004/1552518

- 2

Or just add a class to each div:

<div id="container">
    <div class='div1'>
        style1
    </div>
    <div class='div2'>
        Style2
    </div>
</div>

And in your external css:

.div1 {
    // Style applied only to the first div
}

.div2 {
    // Style applied only to the second div
}

- 3

Or if you can't add a class to the divs use this in css:

#container > div:first-child {
    // Style applied only to the first div
}

#container > div:last-child {
    // Style applied only to the second div
}

Div with External Stylesheet