Cascade et héritage

Cascade
- En pratique
- Correction
Héritage

Cascade

Si plusieurs propriétés sont applicables pour un élement, il faut savoir comment choisir la bonne. La cascade est l'ordre de priorité des propriétés CSS. Il y a trois niveaux de priorité :

importance (!important, par exemple color: red!important)
sélectivité : du plus spécifique au plus général.
1. la propriété style de l'élément
2. une propriété définie pour l'id d'un élément
3. une propriété définie par classe ou attribut
4. une propriété définie pour l'élément
ordre d'apparition dans la feuille de style (le plus bas l'emporte)

En pratique

Vu le html et le css suivants, quelle sera la couleur de fond de chaque paragraphe ?

<p id="p1" class="c1">Texte 1</p>
<div>
  <p class="c1">Texte 2</p>
  <p class="c2" id="p3">Texte 3</p>
  <p class="c3" style="color: yellow;">Texte 4</p>
  <p>Texte 5</p>
</div>

p { background-color: green; padding: 5px; color: white }
#p1 { background-color: red; }
.c1 { background-color: blue; }
.c2 { background-color: purple; }
#p3 { background-color: orange; }
div p { background-color: pink; }
.c3 { background-color: black; }