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>
Related
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.
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
Is it possible, for example, to have a div that completely ignores CSS rules, no matter what classes and ids it contains?
Nope, this is (sadly) not possible without an iframe.
You would have to reset every existing CSS rule for that div like so:
div.sandbox
{
font-size: ....
font-family: ..........
margin: .........
padding: .........
line-height: .........
}
while difficult and never 100% reliable, it might be possible to achieve a usable result this way. You could look at one of the "reset stylesheets" like Eric Meyer's to get a list of important properties to reset; here is what claims to be a complete list of CSS 2.1 properties - excluding CSS 3 and vendor specific ones, which you would have to take into consideration as well.
Providers of 3rd party widgets often hard-code their "reset CSS" as inline CSS inside the HTML element to override any !important rules that threaten to override the sandbox class's rules.
May give results:
div {
all:unset !important;
clear:both !important;
margin: 0 !important
}
Inline style will overide any css styles.
This also mean that any styles set by javascript will overide any css rules, just because javascript is setting styles on a inline manner.
As well any styles between style tag directly on the html part will overide the styles set on the css file.
On any case inlines style are ruling any others hierarchicly.
In a nutshell, there's a global stylesheet:
a { font-family: Arial; }
I want to use a different font family for a particular link:
...
or
<span style="font-family: Helvetica;">...</span>
but nothing works. Is there an easy way to do this?
P.S. I'm dynamically (via PHP) assign different fonts to different links, so creating a special class is not an option.
Unless you have a specific font named Helvetica, you should realise that on some platforms (such as Windows, via FontSubstitutes), Helvetica is aliased to Arial. That might be the source of the problem. Try another font and see.
Your first attempt
...
should have worked. Agree that you're probably missing a font. Inline styles have precedence over any other styles beside a user-defined style sheet. Here's the order of priorities for style definitions:
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
Within a style sheet the priorities are as follows:
Anything marked !important
id
.class
element
In addition, you have the rule of greater specificity: div a overrides a.
Here's a good article with more detail on the subject.
#Kip's suggestion is your best bet.
What you've written should work, unless the problem is what Chris pointed out,
When you get a pair of fonts for which this works correctly, you might consider that a better way of doing this would be to declare a class for the special links that somehow reminds yourself of why they need a separate font (maybe because you want them to be especially noticed?)
a { font-family: Arial; }
a .noticed { font-family: Helvetica; }
Then in HTML:
<a class="noticed" href="...">...</a>
Changing the font by creating a span tag around the link, or adding inline style to the link just smacks of the old days of <font> tags.
element styles override global styles, so Chris Jester-Young is probably right and you don't actually have a Helvetica font; try a different font e.g. Courier or Times New Roman that you're certain exists
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.