Hola
Antes que nada, pego el código en el que baso esta respuesta, así pueden jugar con ella:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
* {background-color: #000; color: #fff;}
html {background-color: #cf112e;}
body {background-color: #c1f12e;}
#verde {color: #0f0;}
.verde {color: #0f0;}
#rojo {color: #f00; background-color: #666;}
#azul {color: #00f;}
#herencia {color: inherit; background-color: inherit;}
</style>
<script type="text/javascript">
</script>
<title>Pruebilla</title>
</head>
<body>
<div id="verde">texto de color verde<p id="rojo">texto de color rojo <font color="#0000ff">texto azul definido mediante font</font> <span>texto azul en un span</span></p></div>
<div id="verde">texto de color verde<p id="rojo">texto de color rojo <font color="#0000ff">texto azul definido mediante font</font> <span id="herencia">texto con herencia</span></p></div>
<div id="azul">texto azul mediante id</div>
<div id="rojo" style="color: #00f">texto con style azul e id rojo</div>
<div id="rojo" class="verde">texto con id rojo y class verde</div>
</body>
</html> Según el W3C, el color de fondo, no es heredable, por lo que el uso de comodines para esta propiedad es totalmente inutil. Sin embargo, el color del texto si lo es.
Como puede verse en el ejemplo que sigue, he definido el elemento html, considerado como elemento raiz en casi todos los motores de renderizado salvo trident y algunas versiones de webkit, con esto, logramos que el fondo sea un tipo de rojo fresa o parecido, al menos en firefox y opera, pero no en explorer (no tengo versión 7, así que no peudo probarlo allí).
Luego defino el objeto body, el cual es considerado raíz en trident, pero no en los demás, al menos en versiones modernas, con lo que logramos una pequeña franja verde entre el texto de color rojo y el texto de color azul; sin embargo, en explorer, toda la pantalla es verde.
Una vez visto que el color no se hereda entre esos elementos, pasemos a los más comunes como el div, span y p.
La primera frase está contenida en un solo div, el cual tiene como color el verde, sin embargo, el único fragmento que tiene el texto de ese color, es la caja anónima del inicio, las interiores tienen sus propios colores.
Ahora veamos la segunda aparición de la línea en cuestión. Al span del final, le indico que herede el color de fondo y del texto. En firefox y opera, hereda el fondo del bloque contenedor más inmediato, sin embargo, en explorer hereda el color de "*".
Los dos últimos ejemplos, son para mostrar la relevancia entre formas de establecer las propiedades, siendo la de mayor relevancia el style, luego el id, luego el class y tras otras opciones, de último, el *; al menos esa regla es más o menos respetada de forma general.
A que nos llevan estos desordenados ejemplos, al hecho de que los colores, al igual que otras propiedades, deben definirse con cuidado y deben controlarse adecuadamente.
Yo soy muy amigo del uso de "*", sin embargo, tiene sus limitaciones en varias etiquetas si queremos lograr consistencia.
Ah, y esto es sin que nos hayamos metido con los bordes, si quieren deivertirse un poco más, agreguen esto al estilo con id verde:
Código HTML:
border: 1px solid #000;
Debido a estas reglas de herencia, el hecho de no definir las propiedades no heredables (valga la redundancia), implica errores conceptuales y posibles riesgos de discrepancias en el renderizado.
Felicidad
P.D.
Andaba con un poco de prisa y algo despistado, así que mi respuesta no es que sea una joya de redacción y claridad, pero espero que sirva un poco, disculpen por eso.