Question

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.

Answer 1

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.