Why <textarea> and <textfield> not taking font-family and font-size from body?

By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.

You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.

As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.

I think what he means is some elements are more specific than others in the DOM, or have a smaller scope. Since a textarea exists inside the body, any style defined for textarea will overwrite body{} styles. So FF's default textarea style overwrites your body style, even though yours is defined later (usually something more recent will take precedence, but not if it's in a broader scope/less specific).

All browsers have built-in default stylesheets. That's why, when you make a page without any styles defined at all, <h1> tags are large and bold, and <strong> makes text bold. Similarly, the font styles for <input> and <textarea> elements are defined in the default styles.

To see this stylesheet in Firefox, put this into your address bar: resource://gre/res/forms.css

Anyway, you have to override these styles as you would any other styles like you did in that last example.

In case you're wondering what other styles are defined, check out the CSS files in your resources. You can access them via the url above, or by looking in your res folder in the firefox directory (eg: c:\program files\mozilla firefox\res). These are the ones which may be affecting the styles of normal pages:

• html.css
• forms.css
• quirk.css
• ua.css

Certain controls are not defaulted to inherit font settings. You can override this by place this in your CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}