Is there any way to override !important properties defined in browser's CSS code other than using per-element style? It seems that the browsers load their precompiled CSS after page's CSS defined in style or link tag. I want to remove borders and colors from default checkboxes and radiobuttons (appearance is not important so it can be easily disabled), my CSS works in userstyles, but on real web pages it doesn't work.
Any page (author) style sheet overrides a browser’s default stylesheet. There is no !important in browser stylesheets. Specificity does not matter here, by the rules of the cascade. What matters is that some presentational features are not controllable in CSS in the first place. Demo:
<!doctype html>
<style>
* { border: none; }
</style>
<input value=foo><br>
<input type=checkbox checked>
This removes the default border of the text input box. On most browsers, it does not affect checkbox rendering, since what we might see as border there is really part of the checkbox widget. IE, as usual, has different behavior, but even on it, you cannot remove the “border,” and if you use your own border on the element, the border is drawn outside the box.
There might be browser-specific ways of affecting their behavior in ways other than standard CSS. You may need to elaborate on what works “in userstyles” and on which browser(s).
So you wanto to "remove" browser default CSS?
I think you can do that with reset CSS, it basicaly resets the browsers styling.
There's many examples out there
Heres one: CSS reset
Yes. Use Javascript to remove the styles from the elements after loading.
Or, design the stylesheet right at first.
What I know is : external css, internal css and inline css. And its overridden order is :
external < internal < inline.
i.e. external css is overridden by internal and, internal and external is overridden by inline.
Also, we can update it through javascript.
Declare your styles, using selectors that are at least as specific as the original selectors.
Mark your overriding styles with !important
Declare/include your stylesheet after the existing styles
Here's an example, where the last !important styles declared take priority over earlier styles.
http://jsfiddle.net/8QHQk/1/
Related
I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.
I'm new to CSS, what should I do to override the background-color for all classes using CSS?
Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS
A screen shot of what I'm trying to change
I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.
From the official documentation:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
And also:
Specificity is based on the matching rules which are composed of CSS selectors of different sorts.
That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.
And you should also look at what CSS Selectors has a higher specificity.
But as you want to override the background-color, that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception.
Again from the documentation:
this declaration overrides any other declarations.
that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.
But also, you have to care about to abuse of that property:
Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
What I recommend:
Try to set your background-color with CSS Selectors with higher specificity.
If you cannot modify the property, and you have tried all the posibilities, then use !important exception.
You can paste this into the bottom of your page right before the tag.
<script>
document.body.style.backgroundColor = "#883377";
</script>
You can the change the #883377 to whatever color you would like.
Problem: An existing resource dependency (which I'm not permitted to alter or remove from the build) which contains a stylesheet that dictates an unwanted button style. I want to somehow overcome the influence that this stylesheet has on the button style in my page.
Question: Using my own local stylesheet, how can I revert to the default Windows css button style (background, shape, text)? -I dont know what the css attributes should be, etc. (I assume I would have to use the "!important" phrase, etc.)
Each browser has its own set of default CSS rules. There is no "Windows" CSS unless you're explicitly referring to IE which does its best to match said style. You'll need to find your preferred browser's defaults and append them after the new CSS to overrule them back to the default theme.
Some common browser default styles:
Firefox
Chrome
IE
Don't use !important
Instead define your button styles with higher specificity and give your buttons the desired look. So if in the original stylesheet you have
button { ... }
then in your stylesheet do
#parent button { ... }
You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance.
Explanation of CSS Inheritance
For example--let's say your 'unwanted' button style is something like this:
<input type="button" class="unwanted" />
And you've got CSS in your (uneditable) style sheet:
.unwanted {
fooRule: whatever;
barRule: whatever;
}
Using inheritance, you just need to write your own external stylesheet. Things to remember:
(1) You should put it below the existing that contains the 'unwanted' stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the 'closest rule wins' principle.
(2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.
Going back to our previous example, the unwanted style is being applied simply by a class of 'unwanted'. Your rule can override without editing the HTML. Alternately you can edit the HTML--it's up to you. It also depends on how globally you want to affect button styles.
If you want to globally affect all buttons with 'unwanted' class, you would do:
input[type='button'] .unwanted {
fooRule:override;
}
If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:
.unwanted.newRule {
fooRule:override;
}
And then you would mod your HTML to be:
<input type="button" class="unwanted newRule">
Note that .unwanted.newRule means it will only impact 'elements' with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:
<form class="unwanted">
<input type="button" class="newRule" />
</form>
The reason being .unwanted.newRule means 'both classes are on the same element'. You would change it to :
.unwanted .newRule {foo}
So--my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.
On a side note, the only reason you'd have to use !important is if the css styling the button is actually being applied using javascript that writes 'style' attributes to the HTML element. If that is the case, (1) don't use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works--in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal 'head' css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.
I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.
Any tips?
It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.
.yui-tt .bd {
/* Styles here... */
}
I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.
If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option
skin : {defaultSkin: ''}
to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.
Also note, that IE6 doesn't recognize !important so it won't work for that browser.
Hope that helps.