L’héritage

Durée 3h

Difficulté ☆ ☆ ☆

Qu’est ce que l’héritage en CSS ?

Les propriétés CSS s’héritent de parents à enfants

Cas pratique

Si une balise parent possède une couleur de texte orange, tous ses enfants la posséderont par défaut.

Exemple

Le HTML

      <article>
        <h1>Ex ea commode maximus</h1>
        <p>Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam <strong><em>sulaco narcissus</strong> fiorina</p></em>
        <ul>
          <li>enim ut aliquip</li>
          <li>auriga enim ut aliquip</li>
          <li>giger enim ut aliquip</li>
        </ul>
      </article>

Le CSS

  
    article {
      color: orange;
    }

Hériter ou ne pas hériter

Les cas où l’héritage est valable

Sur les propriétés inline

  • color
  • font-...
  • text-...
  • letter-spacing

Les cas où l’héritage n’est pas valable

Sur les propriétés de bloc

  • width
  • margin
  • padding
  • border

En cas de surcharge

Un sélecteur de priorité supérieure prend l’ascendant

  
      article {
        color: orange;
      }
      
    article  p {
        color: green;
      }

Exemples

Le HTML

      <article>
        <h1>Ex ea commode maximus</h1>
        <p>Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam <strong><em>sulaco narcissus</strong> fiorina</p></em>
        <ul>
          <li>auriga enim ut aliquip</li>
          <li>giger enim ut aliquip</li>
        </ul>
      </article>

Le CSS

  
    article {
      color: orange; 
      border: 1px solid #000000; 
      padding: 20px;
    }
    
    li {
      color: green;
    }