Unha das características principais de CSS é a herdanza dos estilos. Cando establecemos un estilo a un elemento, os seus descendentes herdan de forma automática ise estilo. Así, neste estilo establecemos un color vermello ao body pero todos os elementos descendentes do <body> mostrarán esa mesma cor de letra.
body { color: red; }
Polo tanto, establecer a cor da letra no elemento <body> da páxina implica cambiar a cor de letra de todos os elementos da páxina.
Aínda que a herdanza de estilos se aplica automaticamente, pode anularse establecemos outro estilo diferente para un selector máis específico, é dicir:
Temos que ter en conta que sempre ten preferencia o selector máis especifico (por exemplo, p#identificador é máis específico ca p, e este último é máis especifico ca body).
Vamos a ver un exemplo:
body { color: red; }
h1 { color: blue; background-color: yellow; }
p { font-style: italic; }
Establecemos unha cor de texto vermella ao <body>, polo que todos os elementos da páxina se mostrarían con esa mesma cor e tipo de letra, agás que modifiquemos algún selector fillo, como é o cas deo:
- Os
<h1>da páxina móstranse co color de texto azul e fondo amarelo, establecidos polo selectorh1 - Os elementos
<p>da páxina amosaranse en cursiva tal e como establecemos polo selectorpe en cor gris, herdado do elemento<body>.
A maioría de propiedades CSS aplican a herdanza de estilos de forma automática.
Por último, aínda que a herdanza automática de estilos pode parecer complicada, simplifica en boa medida a creación de follas de estilos complexas. Como se viu nos exemplos anteriores, se se quere establecer por exemplo a tipografía base da páxina, simplemente débese establecer no elemento<body> da páxina e o resto de elementos herdarana de forma automática.
