CODEWITHSUNDEEP
css
Rosey
Rosey

Reputation: 821

Why is the user agent stylesheet overriding my html{} style?

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. enter image description here

Why? I thought inherited styles trumped user agent styling?

Upvotes: 6

Views: 5657

Answers (1)

tao
tao

Reputation: 90078

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).

Upvotes: 8

Related Questions