Babozor’s Blog

Une des principales caractéristiques du CSS qui malheureusement est trop peu méconnue et trop peu utilisée est l’héritage.
Pour résumer, les déclarations des fils héritent des propriétés du père.
Ce n’est malheureusement pas aussi simple que ça, mais ça résume bien l’intention.
Par nature, le langage HTML est un langage arborescent… en voici un petit exemple:

Si par exemple j’écris la délcaration suivante:

body {color:#B6B6B6;}

Tous les éléments fils du tag Body reprendront la même propriété, c’est à dire un texte en gris.
De même si je veux que mes éléments de ma deuxième liste soit en rouge, je peux écrire ceci:

ol {color:#FF0000;}

Pas besoin de préciser la couleur pour les éléments LI qui sont les fils de OL puisque ceux ci ont hérité de ses propriétés.

C’est extrèmement pratique.
Par exemple, vous voulez que tous les textes de votre page soit en Arial 12 pixels noir ?
Pas de problème, vous avez juste à spécifier la déclaration suivante:

body {font-family: Arial, sans-serif; font-size: 12px; color: #000000;}

Bien sûr, il y a quelques exceptions et ennuis, sinon ce serait beaucoup trop simple (et aussi vachement moins rigolo).
Toutes les propriétés ne sont pas hérités pour des raisons évidentes. Ces propriétés sont: les bordures (border), les marges (margin), les espacements (padding), les arrières plans (background).
La raison est évidente, si vous spécifiez un padding de 30 pour votre tag body (pour le contenu de la page soit espacé de 30 pixels par rapports à la taille réel du navigateur), si cette propriété est héritée, tous les autres éléments seront espacés de 30 pixels, pas très pratique…
Un autre problème peut venir de la non propagation des styles hérités dans les tableaux. IE4 & 5 et Navigator 4 ne propagent pas les styles dans les tableaux, certains navigateurs propagent une partie des styles (par exemple la famille de police et la couleur, mais pas la taille)… une manière de contourner ça est d’inclure les tableaux dans une déclaration globale de ce type:
body, table, th, td {font-size: 12px;}
Il est à noté aussi que si vous effectuez cette déclaration en utilisant des valeurs proportionnelles, certains problèmes peuvent apparaître. En effet, pour les navigateurs de nouvelle génération (IE6+, N6+, Ff1+), les propriétés sont bien propagés dans les tableaux, mais par défaut une cellule de table correspond à 41% de la taille de la police par défaut fixée par l’utilisateur. Il y a donc un risque que si vous effectuez la délcaration suivante:
body, table, th, td {font-size: 0.8em;}
que le résultat ne soit pas vraiment à la hauteur de vos espérances.
Beware, donc…