L’héritage est un concept principal dans CSS. Il signifie simplement que certaines propriétés CSS sont automatiquement héritées d’un parent à ses enfants, à moins qu’une règle différente ne soit explicitement appliquée.
Par exemple, si vous définissez une certaine police pour le corps de votre page web, tous les éléments textuels (paragraphes, titres, listes…) à l’intérieur du corps utiliseront cette police par défaut, sauf si vous définissez une police différente pour un de ces éléments.
L’héritage est automatique pour certaines propriétés CSS, comme les propriétés de texte (par exemple, color, font-size…) mais pas pour toutes. Par exemple, padding ou margin ne sont pas des propriétés héritables.
Pour forcer l’héritage d’une propriété, vous pouvez utiliser la valeur “inherit” pour une propriété spécifique. Par exemple, si vous souhaitez que les marges d’une liste soient les mêmes que celles du corps de la page, vous pouvez utiliser:
ul {
margin: inherit;
}
Cela signifie que l’élément ul hérite de la propriété margin de son parent.
Il est également important de noter l’ordre des sélecteurs CSS. Lorsqu’il y a plusieurs règles qui pourraient s’appliquer à un élément, la règle qui est définie en dernier dans le CSS sera appliquée. Par conséquent, si vous voulez que certaines propriétés soient héritées, assurez-vous de les définir avant les règles spécifiques à l’élément.
Enfin, gardez à l’esprit que l’utilisation excessive de l’héritage ou de la valeur “inherit” peut rendre votre CSS complexe et difficile à maintenir. Utilisez-le judicieusement et lorsque cela a du sens.
