i am trying to injecting font styles for web pages on a web browser.
to change every element of the page.
* {
font-size: 100%;
font-family: Arial!important;
}
in this question almost done the trick but this style get overridden. i want to prevent those overrides too. use of javascript to the solution is also ok.
If it got overridden, make sure it is the last thing in your style sheet (or the last stylesheet you include). The "Cascading" in CSS means that last definition wins.
Add !important to the font-size declaration, too:
* {
font-size: 100% !important;
font-family: Arial !important;
}
If you are using this in a user style sheet (as the words “trying to injecting font styles for web pages on a web browser” suggest), then your rule cannot be overridden.
If, on the other hand, this is just part of an author style sheet, then it can be overridden by a user style sheet, and there is nothing you can do about it. It will not be overridden by a browser default style sheet, as they don’t use !important. With respect to other author style sheets, the cascade rules imply that you cannot be overridden except by a rule that uses !important, too.
In a fight between author style sheet rules that both have !important, the more specific wins, with specificity exactly defined by CSS specifications. Between equally specific settings, the one that comes latest wins.
The selector * has the lowest possible specificity 0,0,0,0. For any selector, you can always construct another selector with a higher specificity. However, a CSS rule inside a style attribute for an element is considered as having the highest specificity.
So if you know which other CSS rules will be used, you can beat them by adding selectors with a higher specificity in your selector list.
Related
In CSS, there's an hierarchy of developing stylesheets: the web-page developer writes a stylesheet, the reader writes another one, and then there's the default stylesheet of the browser. It is known that the order of precedence for the application of the stylesheets are: the developer's, the reader's and the browser's.
It is also known, however, that the reader can override a style assigned by the developer by appending !important to the property declaration:
h1 {
color: white !important;
}
However, what happens if the developer, too, appends !important at the end of their property declaration. Which one takes precedence in this case? Also, does the browser's stylesheet have any !important appended to any property declaration? If it does, how does this effect the style of the web-page?
The book I use for studying HTML and CSS, Head First HTML and CSS, 2nd edition by O'Reilly, tells me there's nothing I can do to override the reader's style (or atleast, that's what I've inferred—it may be that I've misunderstood). I did not try fiddling with the 'reader's' stylesheet simply because I don't know how to do it.
As you have mentioned you are referring Head First HTML and CSS, 2nd edition by O'Reilly, it is important to note it is released in 2012.and over the year !important rules have changed.
I would suggest you go through certian articles.
As #DBS suggested in the comment,
If two rules affecting an element both include an !important flag, it should fall back to standard specificity rules, not necessarily the last !important
Followed by this article
By default, CSS rules in an author's stylesheet override those in a user's stylesheet. However, to create a balance of power between authors and users, !important rules in a user stylesheet will override !important rules in the author’s stylesheet. This CSS feature is designed for accessibility. Users that need larger fonts, specific color combinations, or other requirements due to disabilities related to vision can maintain control over the presentation of a web page.
Hope it helps!
The title says most of it. Is there a CSS keyword which overrides !important at one higher level or is there some feature like this planned in any newer CSS spec?
Of course, I know that !important is a bit likely to be used by noobs and that in many cases it is not the best way to go as stylesheets may really suck if badly written. However, sometimes it's useful and even needed.
The strongest style in CSS I can think of is an inline style with !important like this:
<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>
Now let's assume that I cannot edit the HTML and must modify the style from an external stylesheet.
It would be really great to have something like:
#bluebeaver {
color: blue !important 2;
}
If they had levels for it like for instance with z-index.
Is there any solution to this or anything planned with newer CSS specifications?
So far I did not find anything.
Can you show a CSS solution to override an !important inline style or is there definitely no possibility?
Simply remove the style attribute from the element using JavaScript:
document.getElementById("bluebeaver").removeAttribute('style');
Then use your external stylesheet to apply whatever CSS you want.
Two reasons why creating higher levels of !important is not a good idea:
It sets a bad precedent.
Adding !important2 would be caving in to poor-coding habits on a global scale. It would be the W3C sending a signal that anything goes.
You've also opened the door to !important3, !important4, etc. Where does it end?
Lowering standards and expectations is not a good way for the industry to make progress.
It may not even solve your problem.
Consider this: The person who set that inline style to color: red !important, obviously wanted that rule to have the highest priority.
If your idea became real, and there were higher levels of !important, let's say going up to !important10, guess what that person would have used? And you'd still have the same problem, but you'd be here asking if there were any plans for !important11.
No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.
In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.
There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.
The highest order I know of is targeting elements that have inline styles applied. You can actually select the element's style data attribute in the CSS selector to override its style! Check this out:
.blue[style]{
color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>
Of course you can even get more specific by targeting the style specifically, such as .blue[style="color:red;"].
You can modify the colour of HTML element using javascript.
document.getElementById('bluebeaver').style.color=blue;
Demo : https://jsfiddle.net/041fhz07/
Try Specificity: If two selectors apply to the same element, the one with higher specificity wins.
Try to style your element the more specific you can. Maybe use:
#bluebeaver span {}
Take a look to this link: CSS Specificity: Things You Should Know
if you want to use CSS only you just declare the new style with !important, the last "important" wins. though I'd avoid using it in the first place unless completely necessary.
it should only be used for styles that are essential for your page/app to work, not things that are expected to change.
another solution is to use JS to remove and/or add classes/id to change the style of the element when you don't want to change the CSS itself.
div.prop1.imp1.imp2 {
background-color: red !important;
}
div.prop1 {
background-color: black;
}
div.prop1.imp1 {
background-color: white !important;
}
If you can't do this since not all elements have the .imp1 class on the list in JavaScript, and you are adding say a highlight on something with a button click (.imp2) . You can specify the 'more important' .imp2 class above the others with !important on it.
This makes the property with the additional imp2 class more important than the .prop1.imp1 style because it is loaded first in the css.
I usually trace my CSS stylesheet by using the Chrome web browser.
I can see that some of my styles are being ignored by the inspection window of Chrome - the style is struck out with a black line.
I cannot see why it is being ignored. Usually, I follow all the styles using my eyes to see why it is ignored.
Can I know the structure (inheritance) information by Chrome or by other method?
In Short, Specificity
From CSS Specificity: Things You Should Know:
Specificity determines, which CSS rule is applied by the browsers.
Specificity is usually the reason why your CSS-rules don't apply to some elements, although you think they should.
Every selector has its place in the specificity hierarchy.
If two selectors apply to the same element, the one with higher specificity wins.
There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
You can understand specificity if you love Star Wars: CSS Specificity Wars.
You can understand specificity if you love poker: CSS Specificity for Poker Players.
When selectors have an equal specificity value, the latest rule is the one that counts.
When selectors have an unequal specificity value, the more specific rule is the one that counts.
Rules with more specific selectors have a greater specificity.
The last rule defined overrides any previous, conflicting rules.
The embedded style sheet has a greater specificity than other rules.
ID selectors have a higher specificity than attribute selectors.
You should always try to use IDs to increase the specificity.
A class selector beats any number of element selectors.
The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
You can calculate CSS specificity with CSS Specificity Calculator.
For example
If you had a p with class a, what would you predict it's color would be based on the following rules:
p.a { color: red; }
.a { color: blue; }
If you said blue, you'd be wrong!
As Alochi pointed out, if you're looking for more of a Tree View of the styles hit by a particular element, in the Chrome Developer Tools, go to the computed tab and expand the property you're interested in. You'll get a full list of all the other rules that apply to that element with a link to each. From what you know about specificity and cascading, it should be clearer why the "winner" was chosen.
I generaly find Firebug for Firefox, a little more featrured for debugging CSS.
Selecing an element and viewing the computed tab will show where a particular style is coming from. That will then help with the question of "why".
Most web developers are aware of the cascading nature of style shees and how that works: Inline > Page > Sheet. That is which ever is declare last is applied. What not as many developers are aware of is specifity.
http://css-tricks.com/specifics-on-css-specificity/
http://www.htmldog.com/guides/css/intermediate/specificity/
In a nut shell the more specific the selector, the higher priority.
E.g #anID.aClass will overide p.aClass will overide .aClass
Kyles' answer has more on specificty
I'd like to force all text on one of my systems to be displayed with one font type. However, folks frequently paste in text that has inline styles with all sorts of different formatting.
Could I override an element's inline style in my stylesheet? '!important' isn't enough for this!
You can override inline styles using CSS code that assigns font family to all relevant elements using the !important specifier, e.g.
* { font-family: Calibri !important; }
It is not sufficient to set the font e.g. just on the body element, since then inner elements have their fonts controlled by rules applicable to them. Inner elements inherit font from their parent only if no CSS rule sets the font on the inner element.
If someone is able to inject an inline style that has !important, then you cannot beat that in CSS. You would need to manipulate the document with JavaScript, removing or changing the style attribute.
Inline styles rule supreme.
You can do this, but you'll need to do it using JavaScript. The code would have to basically remove all of the inline style statements from the pasted code. This is a good idea anyway, you never know what people will paste-in.
Using jQuery:
$('.wrapper *').removeAttr('style');
...where your content is within a div with a class of "wrapper"
You do not need JavaScript for this. Despite what you say, !important is indeed enough.
Test case: http://jsfiddle.net/jezen/Z4rnv/
Explanation: CSS rules are chosen based on a level of specifity, which is calculated by the layout engine. The !important rule isn't an all-overbearing modifier; it simply adds extra weight to the respective rule in the specificity heirarchy.
Using the jQuery remove attribute function should do the trick.
removeAttr( 'style' );
I wasn't happy with the non specific nature of the other two answers.
* { font-family: Calibri !important; }
Won't always work sometimes you need to be more specific such as when dealing with spans
span { font-family: Calibri !important; }
Is specific enough because though you are adding important to the value.
Also the type of font styling matters, if the initial font styling was just using a font such as font-family and font-size are more specific already so using
span { font:15px arial,sans-serif; !important; }
would not override an inline style of
<span style="font-family: Calibri">Hello World</span>
I'm trying to skin HTML output which I don't have control over. One of the elements is a div with a style="overflow: auto" attribute.
Is there a way in CSS to force that div to use overflow: hidden;?
You can add !important to the end of your style, like this:
element {
overflow: hidden !important;
}
This is something you should not rely on normally, but in your case that's the best option. Changing the value in Javascript strays from the best practice of separating markup, presentation, and behavior (html/css/javascript).
Have you tried setting !important in the CSS file? Something like:
#mydiv { overflow: hidden !important; }
Not sure if this would work or not, haven't tested it with overflow.
overflow:hidden !important
maybe?
If the div has an inline style declaration, the only way to modify it without changing the source is with JavaScript. Inline style attributes 'win' every time in CSS.
Magnar is correct as explained by the W3C spec pasted below. Seems the !important keyword was added to allow users to override even "baked in" style settings at the element level. Since you are in the situation where you do not have control over the html this may be your best option, though it would not be a normal design pattern.
W3C CSS Specs
Excerpt:
6.4.2 !important rules
CSS attempts to create a balance of power between author and user style
sheets. By default, rules in an
author's style sheet override those in
a user's style sheet (see cascade rule
3).
However, for balance, an "!important" declaration (the keywords
"!" and "important" follow the
declaration) takes precedence over a
normal declaration. Both author and
user style sheets may contain
"!important" declarations, and user
"!important" rules override author
"!important" rules. This CSS feature
improves accessibility of documents by
giving users with special requirements
(large fonts, color combinations,
etc.) control over presentation.
Note. This is a semantic change since CSS1. In CSS1, author
"!important" rules took precedence
over user "!important" rules.
Declaring a shorthand property (e.g., 'background') to be
"!important" is equivalent to
declaring all of its sub-properties to
be "!important".
Example(s):
The first rule in the user's style sheet in the following example
contains an "!important" declaration,
which overrides the corresponding
declaration in the author's styles
sheet. The second declaration will
also win due to being marked
"!important". However, the third rule
in the user's style sheet is not
"!important" and will therefore lose
to the second rule in the author's
style sheet (which happens to set
style on a shorthand property). Also,
the third author rule will lose to the
second author rule since the second
rule is "!important". This shows that
"!important" declarations have a
function also within author style
sheets.
/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
As far as I know, styles on the actual HTML elements override anything you can do in separate CSS style.
You can, however, use Javascript to override it.