I'm using bootstrap for a navbar that I like and I use the style.css from bootstrap, but I also want to implement some elements from another framework that has its own style.css. The problem is that the elements appears distorted because the second style rewrites the first.
Is there a way to specify the influence of a style.css?
For example, style_1.css to have influence over:
<header>...</header>
and style_2.css to have influence over:
<main>...</main>
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:
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.
I had the same problem and I resolved it like this:
copy the CSS rules you want to use in a specific region.
convert them to SCSS by pasting them in this link: css2scss and then
Click on the arrow (choose SCSS).
copy the SCSS rules result you got, and paste them in this link: scss2css.
wrap the entire SCSS rules with this rule: .wrapper {}
like this:
.wrapper {
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/*all other rules*/
}
click on the 'compile' button and wait until you will get all your CSS.
the above SCSS will result like this:
.wrapper a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
and so All your other CSS rules will be prefixed with the .wrapper class.
Click download button to download your CSS, and then link it to your HTML
page.
to use this CSS only in certain regions warp that region with a div
and give this div a class "wrapper".
<div class = "wrapper">
<a class = "a_Class_From_The_Downloaded_CSS_File"/>
<!-- put here all other HTML tags you want
and add all the class etc. you want from the
CSS file you created.
it will not collide with other CSS class from other
CSS files because of the div.wrapper tag
-->
</div>
Generally not. However you could use the > selector everywhere:
#divtoApplyTo > a {
color: green;
}
So that just all links in that specific div get changed.
This is not possible. Stylesheets are applied to the whole document and not to subsections of it. Whether an element is affected by the rules is then subject to the used selectors. Following of that, when you want a rule to only apply to elements within <header>, they must begin with header > or header (space).
However, from your comments it follows that rewriting all rules is not an option since it's too many. A solution might be to use a preprocessor like SASS.
Example:
Input (SASS)
header > {
div {
color: red;
}
button {
border: 1px solid hotpink;
}
}
Output (CSS)
header > div {
color: red;
}
header > button {
border: 1px solid hotpink;
}
The idea would be to wrap all rules that should only be valid for <header> into an appropriate block and let SASS rewrite the rules for you.
However, this leads to blowing up the overall file size. Also, one should not forget that frameworks also include global rules. Since something like header > html or header > body is bogus, this solution might still require doing manual changes.
Haven't tried it, but found this: The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is: Applying CSS styles only to certain elements
bootstrap.css and
bootstrap-responsive.css) into bootstrap-all.css. bootstrap-all.scss, with the content div.bootstrap {.bootstrap-all.css to bootstrap-all.scss. div.bootstrap selector by appending } to bootstrap-all.scss.bootstrap-all.scss to produce a final CSS file. <div class="bootstrap"></div>.