Scope External CSS File for Div(No CSS File Should Link Only )

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

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.

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.

external file loads with main page CSS file

Every CSS you load on a page is available for all the elements on that page. There's no way to separate them by their origin. But you can specify an id for the element you load the external page into, and define/override styles just for it.

#containedIdHere {
...
specific rules
...
}

Other selectors work fine as well:

#containedIdHere .someClass {
...
specific rules
...
}

apply an external css file to a scoped div tag?

There is no such thing as scope in CSS. You can't nest a specific chunk of CSS in other CSS. The below code is WRONG and is just an example of what you CAN'T DO.

.some-class {
/* THIS */
.some-minor-class {
/* IS */
}
/* WRONG */
}

You also can't point certain .css file to work in only a part of html.

Your solution is simple - rename your classes.

There are so many words to describe this world we live in

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

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>

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.



Related Topics



Leave a reply



Submit