Easiest way to ensure same font and font size in labels, input boxes and text areas

Question

I have a page where I combine labels, input boxes and text areas to display some content. I would like all of them to have the same font-family and font-size. I have played with the font-family: inherit style but this doesn't seem to work for the input and text areas. What would be the easiest way to ensure the same font / size over the whole page.

Answer 1

My CSS is iffy as I haven't used it in some time, but I believe doing

*
{
    font-family: arial;
}

will apply to all.

Answer 2

Ok ... this does the trick:

*
{
    font-family: arial;
}

input
{
    font-family: inherit;
    font-size: 100%
}

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

Answer 3

I think most CSS devs will do something like

body {font: normal 10pt Arial}

At the top of the CSS file.

If you want to change labels from this, just add a

label, input, textarea {font-family:Georgia}

somewhere down the road.