Menu
I have the following style on my html element:
html {
font-size: 16px;
font-family: "Harmonia Sans Regular" !important;
}
But even with !important, my font styling is still being overriden in things like inputs.
Why? I thought inherited styles trumped user agent styling?
270
You can override user agent stylesheet declarations with your author styles. And indeed, you do that every day when you write your CSS. Author styles override user styles, which override user agent styles. But here's the thing: this cascade order is inverted for !important CSS properties.
The examples aim to provide some insight into user agent style sheets. Knowledge of user agent style sheets should help get a better understanding of CSS as well as any display “phenomena.” However, I encourage to use this knowledge for other things than building more or larger “reset” style sheets.
the browser default styles defined in user agent stylesheets user-defined styles to customize a website defined in user stylesheets User stylesheets don't seem to be a thing anymore. Chrome disallows them, and Firefox plans to phase them out, hiding the feature behind a development flag. How do these three origins affect each other?
Since , you don't have any css property of input so user agent stylesheet applied to input takes precedence over inherited value from class a. In order to use inherited value you should override using code as suggested by @B T. ie. Importance of a CSS declaration depends on where it is specified.
Nope. If you want your styles to have precedence, they need to apply to the same element. Which, in our case, is input.
You have applied styles to the html element, not to input.
Now, if you changed your selector to html *, to html input, to input or to *, it would be a different story... The two selectors would get compared and yours would have precedence.
The only difference between your selectors and the ones in the default browser stylesheet is yours are loading later, hence, provided you have the same specificity, yours apply. So the minimum selector for yours to apply would be input {}.
But the important bit here is: html {} only styles inheritable input properties which are not defined (not set) at element level. If they are set inheritance does not happen (there's no need to inherit, because the property resolves). The input set value applies, regardless of values and specificity on any of the parents. In fact, if what you're expecting would happen, designing web would be a lot more difficult and a lot less flexible (IMHO).
Which is a reaaaaaly long way of saying: change
html {/* globals here*/}
into:
* {/* globals here */}
... and they'll probably work as intended. But be warned: it will apply to all elements, and you will soon understand why the way inheritance works is, in fact, quite smart (and helpful).
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
