From what I've read css styles overwrite each other depending on the order of inclusion. But I'm experiencing some strange behavior, shown in the picture:
It is clearly visible that default.css is included after base.css which would suppose that styles from default.css will overwrite styles from base.css. However this is not the case, as you see, the style from base.css persists and the style from default.css is being cancelled out. Why is that?
This is because CSS class selectors (e.g., .marginblock in your example) has a higher precedence than CSS type selectors (body in your example).
If your CSS were as follows, you would have the behavior you expect:
In base.css:
.marginblock {
margin: 0 auto;
}
In default.css:
.marginblock {
margin: 25px;
}
Here's more detail on the CSS order of precedence:
ID selectors
Attribute selectors
Class selectors
Child selectors
Adjacent sibling selectors
Descendant selectors
Type selectors
More information can be found here.
Your style from default.css has a more specific selector so will overwrite the base.css style. You may want to google how specificity points work in determining how css gets applied.
Related
I am using external style sheet more than one and internal css and also bootstrap predefined stylesheet. Now the problem is, I need 1 external style sheet would override all style sheets,internal css and inline css. how can i success it
You must use "!important" for your properties to override all styles
p {
padding: 10px !important;
}
There is precedence to css styling methods. Inline styles takes precedence over internal css (using <style></style> tags) and external css (using <link /> tag).
To force properties use !important keyword after your property value.
Example:
external.css
.home-page {
background-color: green !important;
}
PS: Check this question for more info:
What is the order of precedence for CSS?
You need to add/import external css which should override all the styles at the bottom. First add/import bootstrap, then add/import other css files, then your css file which should override others.
When Adding/Importing css files, order is important. The file you add/import at last will override the previous styles.
If something doesn't work as you expected, then give them important like this
h1 {
font-size: 25px !important;
}
In-line css rules always take precedence than other css rules/styles. In that case, you need to mark your rules with !important keyword.
There are several rules ( applied in this order ) :
inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.
Sourec: Details about precedence and css specificity is talked here
There are numerous questions about the order of loading CSS files and overriding classes, but after reading them I still have something I can't figure out.
There are two CSS files:
<link rel="stylesheet" href="standard.css" type="text/css">
<link rel="stylesheet" href="override.css" type="text/css">
loaded in this order (I checked that).
The HTML looks like this:
<div class="div_D1 ov_D1">
<div class="div_D2 ov_D2">
<div class="div_D3 ov_D3">
blablah
</div>
</div>
</div>
Standard.css contains:
.div_D1{
background: white;
}
.div_D2{
height: 10px;
}
.div_D1 .div_D3{
padding-left: 20px;
}
Override.css contains:
.ov_D1{
background: red;
}
.ov_D2{
height: 50px;
}
.ov_D3{
padding-left: 0px;
}
.ov_D1 and .ov_D2 are applied correctly: the background of .div_D1 is red, the height of .div_D2 is 50px.
.ov_D3 on the other hand does not behave as I expected. If I look at the order the rules are applied, the browser first applies .ov_D3, and then .div_D1 .div_D3, leaving me with an unwanted padding of 20px.
If however I change the class selector in Override.css to
.div_D1 .ov_D3 it does remove the padding.
Also changing the css to
.ov_D3{
padding-left: 0px; !important
}
does the trick. So there are solutions, I only can't understand why with a single selector the order of loading is respected, and with multiple selectors it is not.
This is called specificity of a Selectors. From the book Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Ian Pouncey and Richard York:
In addition to style sheet precedence, an order of precedence exists for the selectors contained in each style sheet.
This precedence is determined by how specific the selector is.
For example, an ID selector is the most specific,
and the universal selector is the most general. Between these, the
specificity of a selector is calculated using the following formula:
Count 1 if the styles are applied from the (X)HTML style attribute, and 0 otherwise; this becomes variable a.
Count the number of ID attributes in the selector; the sum is variable b.
Count the number of attributes, pseudo-classes, and class names in a selector; the sum is variable c.
Count the number of element names in the selector; this is variable d.
Ignore pseudo-elements.
Now take the four values and put them together in groups of four.
For Example:
Selector : div.someclass.someother
Selector Type : Element Name + Class Name + Class Name
specificity:
0,0,2,1, (a = 0, b = 0,
c = 2, d = 1)
In CSS, there are rules for specificity (quoted from MDN):
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
Since you have added specificity to your Selector you weren't able to override by normal CSS class selector.
So your Code
.div_D1 .div_D3is more specific than.div_D3and less specific than.div_D3.ov_D3.
JS Fiddle
As per MDN CSS selectors have rules called 'Specificity' which determine their order of precedence. The more specific a rule is, the greater it's priority regardless of position within a/some stylesheet(s).
A rule such as .class-1 .class-3 has a specificity (it's more specific) higher than .class-3 and takes precedence, as such the less-specific rule cannot override it without the use of !important which negates all other specificity rules. Using the higher specificity rule only takes place with conflicting styles, however.
So, you have set the rule:
.div_D1 .div_D3 { }
The above rule is more specific than:
.ov_D3 { }
Even though they target the same element the rule with the higher specificity takes precedence. You can fix this in your JS Fiddle by prepending the appropriate class structure as defined above.
So, .ov_D3 becomes either:
.div_D1 .ov_D3
or
.ov_D1 .ov_D3
Example here: JS Fiddle
If in my webpage, i have all the three css defined for a div
Inline
Internal
external
I know that browser first looks for 1)Inline then for 2)Internal and last, it looks for external css.
but i want to call only external css, how it would be done?? Can i do it through !important or there is any other way?
There is no difference between internal and external style sheets. Which styles are applied depends on:
Specificity
Declaration order
Inline styles are the most specific, then identity rules (#), then class rules (.), then element rules.
For two rules that have the same specificity, for example div .main and span.title, both rules apply, but the one declared last takes over when they specify the same properties.
The only way to circumvent the precedence is to use !important.
Best thing to do is to put everything into an external css file.
If you must have inline styling then make sure you only have ones that aren't already defined
in your external stylesheet. i.e Dont duplicate/override styling. e.g, if you have the following in your css file:
div { padding: 5px; }
then dont have the following inline styling.
<div style="padding-right:2px;" />
Just put it into the css file
div { padding: 5px 2px 5px 5px; }
Like you said, you can use !important if you have to override a styling for just one page that doesn't apply to the other pages in your site.
1)Inline then for 2)Internal and last, it looks for external css.
No. There is no difference in priority between CSS included with <style> and CSS included with <link>.
but i want to call only external css, how it would be done??
You cannot cause CSS included via <style> or CSS included via the style attribute to be ignored.
Can i do it through !important or there is any other way?
You could apply !important to every rule and then hope that no rule included via <style> or style also has !important… but that way lies madness.
What does !important mean in CSS?
Is it available in CSS 2? CSS 3?
Where is it supported? All modern browsers?
It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'
In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
Also, ordinarily, a more specific rule will override a less-specific rule. So:
a {
/* css */
}
Is normally overruled by:
body div #elementID ul li a {
/* css */
}
As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific.
If, however, you add !important to the less-specific selector's CSS declaration, it will have priority.
Using !important has its purposes (though I struggle to think of them), but it's much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.
It also makes debugging your CSS a nightmare (from personal, empirical, experience).
The !important rule is a way to make your CSS cascade but also have
the rules you feel are most crucial always be applied. A rule that has
the !important property will always be applied no matter where that
rule appears in the CSS document.
So, if you have the following:
.class {
color: red !important;
}
.outerClass .class {
color: blue;
}
the rule with the important will be the one applied (not counting specificity)
I believe !important appeared in CSS1 so every browser supports it (IE4 to IE6 with a partial implementation, IE7+ full)
Also, it's something that you don't want to use pretty often, because if you're working with other people you can override other properties.
!important is a part of CSS1.
Browsers supporting it: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
It means, something like:
Use me, if there is nothing important else around!
Cant say it better.
It is used to influence sorting in the CSS cascade when sorting by origin is done.
It has nothing to do with specificity like stated here in other answers.
Here is the priority from lowest to highest:
browser styles
user style sheet declarations (without !important)
author style sheet declarations (without !important)
!important author style sheets
!important user style sheets
After that specificity takes place for the rules still having a finger in the pie.
References:
http://www.w3.org/TR/CSS2/cascade.html#cascade
https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html
It changes the rules for override priority of css cascades. See the CSS2 spec.
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!