Can anybody explain what in reality do !important in css styles?
I when i lok on other site css sometimes they use it, but why? I'm not realy understending the !important "job" :D
Thank You...
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 wanted to make sure that a property always applied, you would add the !important property
to the tag.
So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
More about this
More about this link 2
!important is a part of CSS1.
What is it?
!important overrides other styles that don't have it. Here is a basic order of priority for CSS:
Rules with !important
More specific rules
.classNameA .classNameB {} /* more specific */
.classNameB {}
The order of the rules
.classNameB {}
.classNameB {} /* takes priority */
Example
.classNameB .classNameA {
background-color: red;
}
.classNameA {
background-color: blue !important;
}
Despite .classNameA being more specific in the first rule, the background-color of .classNameA is blue because of !important.
Should you use it?
No, avoid it at all costs. Only ever use it if it's absolutely necessary and if you find yourself in a situation where it is, consider refactoring your CSS. The reason for this is because it's difficult to change your CSS when you have !important rules all over the place. It's also an indicator of bad CSS design.
Further reading
Smashing magazine - !important CSS Declarations: How and When to Use Them
CSS Tricks - When Using !important is The Right Choice
!important sets the priority on the css atributes. If you have two same CSS properties with some different values, one !important mark will set that priority as HIGH.
Normally, latter CSS declarations overrule earlier. So if you have declared, in the style sheet, a certain background color for a certain element, and the style block on the page itself, or an inline style, declares another background color for that element, the style block or inline style overrules the style sheet.
If you add !important to the declaration in the style sheet, that declaration is not overruled.
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
In my CSS, I have this:
b {
color: Red;
}
And in my body:
<b>Hello world!</b>
As a result, I get "Hello world!" text that is red in color.
However, as I add more classes:
.myClass {
color: Blue;
}
.green {
color: Green;
}
And I modify my body:
<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d
I will not get the same result as earlier.
Is there a way to strictly set a CSS style? Which means that with the above code I wish to get "Hello world!" text that is red.
Thanks
This is a question of CSS Specificicty
The concept: Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
Inline styles override external CSS, and class selectors override element level selectors.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors <--- your b CSS
Class selectors <---- your .xyz CSS
Attributes selectors
Pseudo-classes
ID selectors
Inline style <--- your style=''
If you wish to override specificity, you can use !important after the rule in question, e.g.:
b {
color: Red !important;
}
However, this is not recommended, instead you should write 'better' rules (more specific) to target your HTML as appropriate. This ensures you end up with better structured code, the issue with !important being it can lead to unforeseen circumstances where rules aren't working because you may have forgot you had previously overridden them.
Again, from MDN:
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
Some rules of thumb
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css (from ExtJs
or YUI for example). Never use !important when you're writing a
plugin/mashup. Always look for a way to use specificity before even
considering !important
With the markup that you provided, no. Otherwise, maybe
The inline style has priority over the stylesheet so part of the text will be black no matter what. You might be able to create a rule that has enough specificity that it will take precendence over any other rules.
b, b .myClass, b .green {
color: red;
}
Though this can get troublesome to maintain. And there is still a chance that a different css rule will get higher precedence later on. I am not completely sure that even specifying all the children with * will do it.
You seem to be asking whether you can set a property (color in the example) on an element in a manner that will not be overridden by settings on inner elements.
You cannot do that with settings on the element itself. But you can set a property on an element and all of its descendants:
b, b * {
color: Red !important;
}
This will override any normal settings for color on inner elements. But it is ineffective against, say, .green { color: Green !important; }. To defeat that, you would need a more specific selector, such as b .green, for your rule—so there is no general way to achieve that (i.e., a way that is independent of the specific markup used inside the element).
how can I force an image to be aligned hard to the left, regardless of what css applies to the container it is placed in?
You could use !important on the style to increase it's precedence over other styles.
style="text-align: left !important;"
Or
#foo { text-align: left !important; }
However, this is considered bad practice. Ideally you should give your selectors the level of specificity required. Could you post up your CSS.
You need to apply a more specific CSS rule to that particular image, e.g. one that references the image by Id or use !important.
#idOfMyImage { /* Desired CSS here */ }
Here's a good (and humorous) overview of specificity in CSS
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
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!