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!
Related
I have the following scenario:
Printscreen of my problem
I have a CSS in the project (which I can't change) defining the following:
body * {
font-family: 'x'
}
And this CSS is influencing my shadow DOM, because of that, I can't use the font-family property without using !important. Only with !Important works:
::slotted(span), ::slotted(p){
font-family: arial !important;
}
Does anyone know what to do in this case?
Most of the information needed to answer this can be found in this related answer. In summary: A document-wide style without !important will always override a shadow dom style without !important, if they apply to the same element.
(And in this case, they do apply to the same element: slotted elements exist outside the shadow dom, so * rules in the document stylesheet can find them.)
You've already found two workarounds to this. I'll list them here for completeness:
Use !important:
This is ugly, but it does work. Not only does !important override any and all non-!important rules, but it also overrides any !important rules coming from the document-wide stylesheet!
Reduce the body * rule to just body:
This way, the rule won't apply directly to every element - it will only apply directly to body, and affect every other element via inheritance. Inherited rules can be overridden by anything, since they're only a fallback in case nothing else applies.
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
Suppose I have some html like this -:
<div style="blah...blah">Hey Nice</div>
<a style="blah...blah">Great</a>
How do I remove all the inline styling applied to the above elements in my stylesheet considering I don't know what all inline styling exists.
Currently I am trying this, but in vain -:
div[style], a[style]{ !important }
You must reset all css properties for elements that have style attribute:
[style] {
position: static !important;
float: none !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 none !important;
// and so on
}
There are several determining factors determining which CSS property prevails in any situation. In order, these are:
Whether the property value has the !important flag or not.
If the style declaration is applied inline via the style attribute.
The strength of the CSS rule selector
If the rule has any ID clauses, and if so how many
If the rule has class, attribute or pseudo-class clauses, and if so how many
If the rule has any tagname clauses, and if so how many
If the property is parsed later in the source than another property with a rule of the same strength
So the only way to override the properties is to make sure that all the properties applied via style are applied elsewhere in your stylesheet, and have the !important declaration. The most rational way to do this is still very awkward — it would involve applying a very specific reset stylesheet, and including !important on every property on every rule.
But even if this is done, you still couldn't override inline style declarations that have !important themselves.
You've told Mojtaba that there should be a better solution, but that better solution would involve designing CSS to break its own rules. Imagine if there was a simpler solution for overriding inline styles from stylesheets designed into the language of CSS — should there also be another solution for simply overriding the override from inline styles? Where does the cycle end? All in all, I'd recommend using Javascript or giving up. Or describing your specific problem in more detail — there may be another solution!
If you're not happy with using !important overwrites in the CSS (as suggested by others on here), the only way would be to use JavaScript to remove the styles.
This is really easy in jQuery (better if you're able to assign a class name to the elements to select it with):
$('.selector').attr('style', '');
This will simply replace the element's 'style' attribute with nothing, thus removing the inline styles.
This isn't ideal though since it will rely on the visitor having JavaScript enabled, and may well result in the visitor seeing a style 'flash' as the page loads: the styles assigned in-line to the element before the JS kicks in and removes it.
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.