Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Si se considera el siguiente ejemplo:

<!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" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
  body { color: blue; }
</style>
</head>
 
<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>

En el ejemplo anterior, el selector body solamente establece el color de la letra para el elemento <body>. No obstante, la propiedad color es una de las que se heredan de forma automática, por lo que todos los elementos descendientes de <body> muestran ese mismo color de letra. Por tanto, establecer el color de la letra en el elemento <body> de la página implica cambiar el color de letra de todos los elementos de la página.

Aunque la herencia de estilos se aplica automáticamente, se puede anular su efecto estableciendo de forma explícita otro valor para la propiedad que se hereda, como se muestra en el siguiente ejemplo:

<!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" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
  body { font-family: Arial; color: black; }
  h1 { font-family: Verdana; }
  p { color: red; }
</style>
</head>
 
<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>

En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del elemento <body>, por lo que todos los elementos de la página se mostrarían con ese mismo color y tipo de letra. No obstante, las otras reglas CSS modifican alguno de los estilos heredados.

De esta forma, los elementos <h1> de la página se muestran con el tipo de letra Verdana establecido por el selector h1 y se muestran de color negro que es el valor heredado del elemento <body>. Igualmente, los elementos <p> de la página se muestran del color rojo establecido por el selector p y con un tipo de letra Arial heredado del elemento <body>.

La herencia de estilos funciona automáticamente en la mayoría de las propiedades CSS. Más adelante se explica el mecanismo definido por CSS para forzar a que el valor de una propiedad se herede.

Por último, aunque la herencia automática de estilos puede parecer complicada, simplifica en gran medida la creación de hojas de estilos complejas. Como se ha visto en los ejemplos anteriores, si se quiere establecer por ejemplo la tipografía base de la página, simplemente se debe establecer en el elemento <body> de la página y el resto de elementos la heredarán de forma automática.

Que es una Red social de colaboración Una Red de colaboración es un conjunto de personas que aportan trabajo intelectual a un proyecto con un objetivo común al grupo. Otra manera de ver...
Operadores en Javascript Las variables sólo se pueden utilizar para almacenar información. Sin embargo, es muy habitual que los programas tengan que manipular la informa...
Ranking Lenguajes de Programación Mayo 2013 C vuelve a ser la tecnología referencia por delante de alternativas tan importantes como Java. C, desde hace tiempo uno de los lenguajes de program...
Presentan PaperPhone el móvil que se controla doblando su pantalla Después del móvil con tres pantallas flexibles y plegables que les presentamos hace poco, ahora nos llega otro prototipo de teléfono para el futuro qu...
Mozilla presentó un Smartphone de $25!! Mozilla anunció el lanzamiento para la India de un teléfono inteligente de “ultra bajo costo” (cuyo precio rondará los US$25), “una iniciativa que pue...
Ranking Sistemas Operativos Enero 2012 Tras un 2011 marcado fundamentalmente por la estabilidad, el conjunto de sistemas GNU/Linux que forman lo que hoy en día conocemos como comunidad de d...
Historia de la Computación, El Mouse La gran mayoría de usuarios que utilizan interfaces gráficas (GUI) para trabajar con sus computadoras, además del imprescindible teclado, suelen utili...
Twitter tendrá su Analytics para evaluar las estadisticas de uso La red social Twitter es una de las más populares del momento, con el permiso de Facebook, claro está. De hecho, además de ser un espacio muy utilizad...
Twitter abre el código fuente de tecnología de seguridad de Android Twitter planea lanzar el código fuente de algunos de los programas de software de Whisper System, empresa adquirida hace un mes. Twitter empezará c...
Lo Mas Curioso del CES 2012, Consumer Electronic Show Los organizadores de la Feria Internacional de Productos Electrónicos de Consumo, CES, por sus siglas en inglés, aseguraron que este año alcanzaron un...