Is it possible to load external Style Sheet after Internal (or embedded) styles get loaded. I mean, say I have a div with Yellow background color, set using embedded style in a page, like;
<style type="text/css">
div{
background-color: yellow;
}
</style>
And can I change the background color to green using an external style sheet like;
<link rel="stylesheet" href="style.css" type="text/css" />
If this is possible, show me an example.
I know this is possible with inline style, but I don't want to use that.
Yes.
Just put the <link> tag after the <style> tag, or make the selector in the external stylesheet more specific.
To answer your question, yes you can. The styles will be applied in a specific order. See here for precedence rules in CSS.
if you want to overwrite a css with same class, you can use 'important' in that class. Study more about important in css.
offcourse you can just place the external style sheet after the internal style sheet in HTML head section to override the internal style sheet!
CSS ORDER
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
Related
I'm trying to add a background-image to a view in vue vite. I don
't want to set this background-image on every view so I tried to add it inside the views site using a scoped css style.
But once I assign scoped to the style tag it won't use the style...
Example code which doesn't work:
<style lang="css" scoped>
body{
background: url("../../assets/images/background.jpg") !important;
}
</style>
Once I remove the scoped it would work but it would add the background to every view which shouldn't happen. Does anyone know why this happens?
From the docs
When a <style> has the scoped attribute, its CSS will apply to elements of the current component only.
This means thst only the elements in your <template> will get the style and since there is no <body> in your template, then it doesn't get style.
I am working on jqGrid. I tried to apply some custom style on jqGrid pager and it is working fine when I put them in style tag of html. Something like given below.
<style>
.ui-paging-pager {
background-color: white !important;
}
</style>
But, when I store them externally in .css file, it is not working. I have created customPager.css file, in which I have stored all the css code for pager and used the path of the css file in html file link.
Can someone tell me where am I wrong and How to store custom css in external file for JqGrid?
Inline styles or those in <style> tags within a document will automatically override externally defined style rules.
However to override a style in an external stylesheet you need to give the rule you define in your own stylesheet a higher specificity. You can do that by including the parent elements in the selector. For example:
#container .foo > .bar .ui-paging-pager {
background-color: white;
}
Also note that the !important rule should be avoided for this reason.
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
I have a css sheet for a big project that I can't change, "cantChange.css"
I also have a css sheet for a small portion of the project that I am able to change "canChange.css"
Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.
Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?
The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:
background-color: blue !important;
If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.
You've got a few options to address this:
Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)
You can make your own declaration MORE SPECIFIC to override the others.
For example:
body.someclass .anotherclass { ... }
<body class="someclass">
will always override .anotherclass { ... }
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
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>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors