How to specify font attributes for all elements on an html web page?

When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.

Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?

How to do that?


* {
 font-size: 100%;
 font-family: Arial;
}

The asterisk implies all elements.


If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Edit: you may want to read up on CSS resets; see threads like this one


I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.

Try Eric Meyer's reset.css.