I wonder is it possible to dereference a CSS file referenced earlier in the HTMl page.
I'm asking because I'm responsible for part of the page, the framework rendering the whole page references some CSS file in the format of
<link rel="stylesheet" type="text/css" href=XXX.css>
And this CSS file is overwriting my CSS file, so I wonder if I can dereference it or is there any other suggestions?
Thanks a lot.
Instead of trying to remove that file try putting more specific CSS rules:
[parent.css]
a {
color: red;
}
[your_file.css]
body a {
color: blue;
}
CSS always applies on entire document.
The way you can do for only one div is just define a unique id or class to your div you want to write css for.
<div class="main_div" id="myCss">
//further content like h1, div, ul, li
</div>
And now when you write css just inherit all the css like this
#myCss h1{
// mycss
}
#myCss ul li{
// mycss
}
This way css will be applied only on your div.
Related
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
<head>
<link href="index.css" rel="stylesheet">
<style>
#amor_di_mundo{
color:#ffffff;
}
</style>
</head>
<body>
<div id='divL'>
<div id='amor_di_mundo'>Amor di Mundo</div>
<div id='quem_boe'>Quem Boe</div>
</div>
index.css
#divL div{
color:#800000;
}
In index.css a div (#amor_di_mundo) is styled with color:800000
In a specific file I need to overwrite it with color:#ffffff but it's not overwritten !
The problem is with css specificity: a inline style has more power than an external file. Use the same selector, and move the inline styles in a default stylesheet, then add your new styles in a desired file and load first the default stylesheet, then the second stylesheet that you want to overwrite with
The css would need to follow the same rule. So it would need to be
#divL div {
color: #ffffff;
}
You could mark it as important to get around this:
#amor_di_mundo {
color: #ffffff !important
}
As #divL div is more specific than #amor_di_mundo.
You need to apply either color: #ffffff !important to or write css like this:
#divL #amor_di_mundo{
color:#ffffff;
}
I think you need to put the syle attribute not in header but where the element is in the body itself. The syntax to follow is:
Style="color:#ffffff;"
Add it to the opening tag of the element.
I was googleing this question but could not get any appropriate result.
Is there an option in the script editor to import html classes and ids automatically? So for the following html code example, the css structure below is automatically created:
HTML:
<div class="container">
<ul>
<li></li>
</ul>
</div>
CSS
.container{
}
.container ul{
}
.container ul li{
}
.container ul li a{
}
Some Editors like Dreamweaver create the CSS code automatically when you apply a certain formatting to it.
For example if you select red as font color in a paragraph it adds the respective CSS code.
Depending on how you configure your CSS styles it may be added to a separate file or in the same HTML as a <style> tag
I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
width: 180px;
border: 1px solid #aaa;
}
This CSS referred in header of the page. Later in page I define following:
<style>
.shortField {
width: 50px;
}
</style>
I assign class "shortField" to my input box but size is not applied. F12 screenshot:
The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
width: 50px;
}
An alternative would be:
body .shortField {
width: 50px;
}
Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
margin-left: 0 !important;
}
Try to use the lowest specificty selectors that you possibly can.
You need to learn about specificity...
The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific
And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField { /* This is more specific than simple element selector */
/* Styles */
}
It is because the styles in your main.css file are more specific than in your html head.
If you really need to override it try doing this:
.shortfield {width: 50px !important;}
Might help you to understand the hierarchy of importance for CSS.
Inline > Embedded > External
Inline styles are anything within style="" and override any styles specified from embedded, or external stylesheets.
Embedded styles are styles within <style> within the <head> of the document. They are overridden by inline, but override external.
External styles are written in external files, and are overridden by either embedded or inline.
My theory is that you have styles overriding your external stylesheet.