There are two import urls being called
#import url(SiteA.css);
#import url(SiteB.css);
SiteA.css has
div {border-color: blue;}
SiteB.css has has
div {border-color: red;}
what would the border color would it be blue or red , which wins SiteA.css or SiteB.css
The last called styling will overwrite all the above. CSS will run from top to bottom. This means that the styling on the bottom will overwrite the styling above, unless you use !important. So to answer your question, the border will be red.
If you don't now how !important works you can read the following article:
https://css-tricks.com/when-using-important-is-the-right-choice/
HTML will read and execute the code going from top to bottom. Because importance or specificity isn't defined in your CSS, the stylesheet that gets called lower in the file overwrites the stylesheet above it.
So in this case, the second stylesheet will overwrite the first and the border will be red.
Definitely SiteB.css wins as it comes after the other one, CSS rules are overwritten by order (unless you use !important or use more specific selectors).
Thanks all , I read this post now I understand the last wins
http://www.blooberry.com/indexdot/css/topics/cascade.htm
Related
i'am new to mkdocs, here is what i'm trying to do:
add a caption to images and use a css style to use a shorter margin-bottom
i managed to install a python-makdown extension "captions", so if i use
: my sub caption
i'll get
<figure><img ...><figcaption>...
in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default.
How can i overwrite base.css styles with my own styles?
As i wrote in my comment, !important guarantees overwriting:
figure img {margin-bottom: 0px !important;}
But I don't understand why...
If you use your browser's developer tools to inspect the img element...
You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.
We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.
To override that, you need at least the same level of specificity:
I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.
Rather than tweaking the CSS, it might be easier to try a different plugin, such as img2fig
I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
I have 2 css files in my page:
Site.css
jquery-ui.css
Site.css is listed BELOW the jquery-ui css
I have a link that looks like this on my page:
<a class='closeClueTipLink'>close</a>
and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:
I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.
Any ideas or suggestions why this ordering is happening ?
Because there's an a selector just after .ui-widget-content:
.ui-widget-content a
Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.
You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.
Quick Fix:
Add an "a" before your class selector:
a.closeClueTipLink {
Explanation:
It has to do with Specificity [details].
The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'
By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.
Example:
/* css */
div p { color: red; }
p { color: blue; }
<!-- html -->
<div><p>Text</p></div>
The text in the above paragraph will be red because the first CSS item is more specific than the second.
.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.
change it to read
a.closeClueTipLink
Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.
I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.
There are ways you are amend this problem:
Pinpoint the selector like .ui-content-content a.closeClueTipLink
Use !important at the end of color defination. color: #222 !important;[not recommended]
I like what twitter has done with bootstrap css, except for their resetting the fieldset and legend tags.
Q: Short of cutting those definitions out of bootstrap.css, is there a way to tell the browser to ignore those commands?
The reason why I don't want to change bootstrap.css is in case they update it some time in the future, I might not remember to go back in and say "Everything is good except for these 2 definitions".
Just redefine it to what you want below the bootstrap.css definitions. Later css always overrides early css (assuming the !important flag is not set on the earlier).
So:
legend {color: red;} /*pretend this is bootstrap's definition*/
legend {color: green;}
will produce green text.
NOTE: you do need to be aware of css specificity. Class and ID's and other such css can make the definition more specific, so to override it, later css must have equal or greater specificity.
.box legend {color: red;} /*pretend this is bootstrap's definition*/
legend {color: green;}
Would produce red text if the legend is in a box classed element because of the higher specificity of the .box class. You would need to at least match that specificity:
.box legend {color: green;}
I have one stylesheet (layout.css) that imports the following CSS at the top of the style sheet:
#import "reset.css";
#import "typography.css";
#import "forms.css";
#import "fonts/fonts.css";
#import "tablecloth.css";
Everything seems to be in order apart from that blasted typography style sheet. What I mean by that is when I apply a style to, say, a paragraph, the only styles applied to it are taken from the tyopgraphy style sheet.
Example:
Applied in layout.css:
#three-col-container #right-col.filter p.more { color: #ff0000; font-size: 1.2em; }
What Inspector is telling me is applied (these styles are included in the typography style sheet):
p { font-size: 1em; color: #444; }
I've never came across this sort of inheritance issue. The other style sheets are working as expected.
Any suggestions welcome.
Thanks.
You could try using the !important flag on the end of the rule you want to override, before the semicolon.
This will make sure it's always applied, and so should override the inherited rule.
#three-col-container #right-col.filter p.more means:
Apply this style to paragraphs (p) which have the more class that are descendants of something which has the id right-col and class filter that is descendant of something with id three-col-container.
Is this right?
Are you sure that in the typography stylesheet the style rules don't have the !important flag at the end? Are you that the URL of that stylesheet is correct?
It might be a specificity issue??
I found this awhile ago that's helpful when trying to determine css inheritance rules:
Add 1 for each element (ex p and a) and pseudo-element (ex :before and :after);
add 10 for each attribute (ex [type=”text”]),
class and pseudo-class (ex :link or :hover;
And add 100 for each ID;
and add 1000 for an inline style.
So #three-col-container #right-col.filter p.more has 2 ID's, 2 classes and 1 element, so it has a weight of 221.
Is it possible that there might be another rule that has a higher weight that's overriding your rule? Are there any other styles being applied other than those two? (Or even javascript applying inline rules?)
I try and use either Firebug or the Chrome/Safari Developer tools to try and figure out what rules are coming from where. Typically it'll give you the name of the css and the line the rule is on, the overridden rules will have a strikethrough. Once I figure out what rules are taking precedence I can raise or lower the weight of the rule to make it inherit properly.
Hopefully that helps!