CSS and nested elements

[scoobasteve1982]

I have a quick question regarding CSS. I'm a developer and run into a CSS issue sometimes that I can't seem to figure out. Here's an example. I want to style all the text on my pages to have a font size of 10 pixels. So of course I'm doing the following:

body { font-size: 10px; }

Sometimes it will take care of the content throughout all pages and sometimes it wont. I don't understand why this happens. It especially occurs with a lot of nested tables, divs, etc. Any suggestions would be helpful. Thanks! I'm just tired of styling every single element (text size and fonts mostly) over and over again. That is the beauty of CSS - eliminating repetitive scripting and I don't think I'm taking advantage of it. Thanks!

[nekeno12]

What you can do, that will only work on some elements of course, is use:

font-size: inherit;

And this will rely on the parent's styling. Now some elements like <input> <textarea> use the browser's default font styling and you will have to style these directly.

Another thing I would try is this:

*, html, body { font-size: 10px }

This refers to almost everything on the page.

[AutisticCuckoo]

It should work, but IE3/4/5.x for Windows (and possibly IE6/7 in quirks mode?) have a bug that causes font size not to be inherited by tables.

body,table {font-size:10px}

This should take care of most inheritance problems.

Note, however, that using pixels for font size is a very bad idea since it prevents IE users from resizing the text. Unless you have a font size that everyone is guaranteed to be able to read (and that's a lot larger than 10px), you won't be very popular among many of your visitors.

[scoobasteve1982]

you guys are great..thanks!