How can I reset the default values in the properties that had their values inherited from other css files ?
I mean…
How can I reset all the default values in the properties that had their values inherited from other css files ?
Hi Leko_, welcome to Sitepoint :).
You can’t do this manually, at least not with CSS. AFAIK there is no CSS library or even a JS library that exists for this.
If you could copy all the elements from the other stylesheet (all the selectors I mean), you could just reset the values manually to “auto” or whatever the normal value is.
Why would you want to even do this though…?
There is an element that I need to just set some properties on it and leave the rest as default, but there are many css files on it applied into the document and inherits many properties of their parent elements.
But then I will set each one.
Thanks !
Well if it’s just one element then I’d just manually reset it as I mentioned above. My comment isn’t really feasible for any sort of large scale file. But one element should be no biggie :). You’re welcome!
You can just make a rule for that element that is more specific than any other rule.
Or, you can take a shortcut and add !important to your preferred style. E.g.
p {color: red !important;
I think it important to understand WHY it can’t be done rather than just know that it can’t be done.
Each browser has its own “default” stylesheet, it is the first thing that gets overridden ; The order is something like:
linked style sheets, <style> , user specific style, inline CSS. Maybe I got those last two backwards but what I am trying to point out is that you aren’t really writing over some “hardwired” values. Once you start declaring values you are overriding and in a sense creating a new default, since you can never know the ACTUAL ORIGINAL values set by the UA or the USER anyway.
If you are trying to override someone else’s code (for shame!!) first keep in mind code order. LAST IMPORTED style sheet will beat out the PREVIOUS ONES, so make the link to your code LAST. EMBEDDED CSS beats out LINKED external style sheets, but this may not be something you want to do if you are essentially trying to recode most of the rules, and doing so on every page of your site!
I think its was the suggestion above… but again I will distill the concept.
Add more specificity ( ! important will do this… but it could lead to some serious side effects). So, I would recommend you look at the markup you are trying to style, are you targeting the children of a specific area/class/ID??
So for example and code all YOUR CSS ( the rules you are trying to change) with BODY (the rest of the selectors you are trying to beat as they appear on their code) {the rules you are overriding} it should do the trick.
example:
.theirClass p{ color: red; }/* the old rule*/
body .theirClass p{ color: pink; }/* your rule.*/
Hope that makes sense to you.