L'héritage des styles en CSS

Tu veux que toute la page sur la dynastie des pharaons utilise la police Georgia et un texte brun foncé. Tu pourrais écrire les deux mêmes déclarations séparément pour les titres, les paragraphes, les listes et les liens... ou une seule fois, pour body. La seconde solution fonctionne grâce à l'héritage.

L'héritage des styles en CSS (Cascading Style Sheets) est un mécanisme qui permet de transmettre les valeurs des propriétés de style des éléments parents aux éléments enfants dans l'arbre du DOM (Document Object Model). Grâce à l'héritage, on peut créer une apparence cohérente pour une page web en appliquant des valeurs de propriétés définies aux niveaux supérieurs de la hiérarchie des éléments. C'est comme dans une dynastie : le pharaon transmet à son héritier le titre et le pouvoir, mais chaque pharaon reçoit ses propres vêtements.

L'héritage est particulièrement utile pour les propriétés qui sont héritées par défaut. Cela signifie que les valeurs de ces propriétés appliquées à un élément parent seront automatiquement héritées par les éléments enfants, sauf si elles sont redéfinies dans les règles de style de ces éléments. Parmi les propriétés héritées, on trouve par exemple : color (couleur du texte), font-family (famille de police), font-size (taille de police) et line-height (hauteur de ligne).

Cependant, toutes les propriétés ne sont pas héritées. Certaines propriétés, comme background-color (couleur de fond), border (bordure) et padding (espacement interne), ne sont pas automatiquement héritées. Pour ces propriétés, on doit spécifier explicitement des valeurs pour les éléments enfants.

Qu'est-ce qui s'hérite, et qu'est-ce qui ne s'hérite pas ?

Une règle simple : les propriétés du texte s'héritent, les propriétés de la boîte ne s'héritent pas.

Si la bordure s'héritait, chaque paragraphe d'une section encadrée recevrait sa propre bordure, et chaque lien dans un paragraphe une de plus. C'est pourquoi les propriétés de la boîte restent sur l'élément auquel tu les as données.

L'héritage des styles nous donne la possibilité de créer une apparence cohérente et harmonieuse pour une page web. On peut définir des styles généraux au niveau de l'élément parent et être sûr qu'ils seront hérités par les éléments enfants, ce qui facilite le maintien d'un aspect uniforme sur l'ensemble de la page. En même temps, grâce à la possibilité de redéfinir les valeurs héritées, on peut personnaliser l'apparence d'éléments individuels pour obtenir les effets visuels souhaités.

Un exemple avec body

Pour comprendre comment fonctionne l'héritage des styles en CSS, considère l'exemple suivant :

1<body>
2  <h1>Exemple d'héritage</h1>
3  <p>Paragraphe avec couleur et famille de police héritées, mais avec sa propre taille de police.</p>
4</body>

1body {
2  font-family: Arial, sans-serif;
3  color: blue;
4}
5p {
6  font-size: 20px;
7}

Dans l'exemple ci-dessus, l'élément <body> a des styles font-family et color définis. Comme ces propriétés sont héritées, les éléments enfants comme <h1> et <p> adoptent eux aussi les mêmes valeurs pour ces propriétés. Ces valeurs s'appliqueront tant qu'elles ne seront pas redéfinies par d'autres styles définis directement pour ces éléments.

Pour l'élément <p>, la valeur de font-size a été définie directement, donc il n'utilise pas la valeur héritée de l'élément parent.

D'où vient cette couleur ? Demande aux DevTools

Quand un élément a un style que tu n'as pas écrit dans sa propre règle, inspecte-le dans les outils de développement (F12). Dans le panneau Styles, sous les règles de l'élément lui-même, tu trouveras des sections comme « Inherited from body » ou « Inherited from div » : ce sont les styles hérités des ancêtres. Les propriétés qui ne s'héritent pas y apparaissent grisées.

Les mots-clés inherit et initial

Si tu veux forcer l'héritage d'une propriété qui ne s'hérite pas par défaut, utilise le mot-clé inherit. Par exemple :

1div {
2  border: 2px solid gold;
3}
4
5p {
6  border: inherit;
7}

Un paragraphe situé dans le <div> reprendra sa bordure dorée, même si border ne s'hérite pas par défaut. Les propriétés héritées, comme font-size, n'ont pas besoin de inherit : elles passent toutes seules aux enfants.

Cela marche aussi dans l'autre sens : le mot-clé initial rend à une propriété sa valeur initiale définie par la spécification CSS, et coupe ainsi l'élément de ce dont il a hérité. Par exemple, color: initial donne en général un texte noir, même si le parent est bleu.

Pratique

Dans l'éditeur ci-dessous, la couleur et la police ne sont définies que sur la section .papyrus, et pourtant tous les paragraphes les ont. Change la couleur dans la règle .papyrus et regarde tout le texte changer. Ensuite, supprime la déclaration border: inherit de la règle .quote : la bordure du paragraphe disparaîtra, car border ne s'hérite pas :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <title>L'héritage des styles</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <section class="papyrus">
10    <h2>Le Livre des morts</h2>
11    <p>Ce paragraphe n'a pas de règles à lui, et pourtant il a la couleur et la police de la section.</p>
12    <p class="quote">Ce paragraphe a reçu une bordure grâce à <code>border: inherit</code>.</p>
13  </section>
14</body>
15</html>

Souviens-toi : l'héritage, c'est la transmission du pouvoir dans une dynastie - le parent donne à ses enfants la couleur et la police, mais chaque élément doit recevoir lui-même ses bordures, ses fonds et ses espacements.