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
"Height=100%" Is Not Working in HTML When Using <!Doctype>
Failed to Load Resource, Plugin Handled Load on iOS
Different CSS for Each Browser
Table Headers Position:Sticky and Border Issue
Html5: Non-Replaced VS. Replaced Element
CSS Filter:Invert Not Working with Background-Color
Chrome Getusermedia Not Requesting Permission Locally
How to Create a Slanted Background with CSS
How to Display Text, a Dotted Line Then More Text Spanning the Width of the Page
Arabic Characters from HTML Content to PDF Using Itext
CSS Text Underlining Too Long When Letter-Spacing Is Applied
Understanding Grid Negative Values
Thymeleaf - How to Apply Two (Or More) Styles Based on Mutually Exclusive Conditions
Remove Value Attribute of Input Element Using CSS Only
How to Set Font-Family in HTML Select Dropdown List in Ie