Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.
Propriétés héritées
Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.
Un exemple caractéristique d'une propriété héritée est la propriété color. En définissant la règle de style :
p { color: green; }
Sur le fragment HTML suivant :
<p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
On obtient le résultat suivant :
Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété color de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).
Propriétés non héritées
Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).
Un exemple caractéristique de propriété non héritée est la propriété border. En définissant la règle de style :
p { border: medium solid; }
Sur le fragment de code HTML :
<p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
On obtient le résultat suivant :
Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété border-style est none).
Notes
Le mot-clé inherit permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.