Why are CSS-styles not inherited by HTML form fields?

Question

I want to set the font-style and font-size of the text in my HTML document.

    
    &l         


        

Answer 1

An element inherits a property only when no style sheet sets that property on the element (or when the value inherit has been set). Form fields generally have settings for them in browser style sheets.

So you need to explicitly set properties on them to override the browser defaults. You can do this with the universal selector * if you want all elements to have some properties, e.g.

* { font: 100% Calibri, sans-serif; }

You can easily override this for specific elements when desired, since the universal selector has very low specificity.