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?
If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.
you can set them in the body tag
body
{
font-size:xxx;
font-family:yyyy;
}
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
* {
font-size: 100%;
font-family: Arial;
}
The asterisk implies all elements.
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.