Nous avons vu dans l'article précédent ( écrit par Ahamad) la notion d'héritage (les éléments prenant des valeurs de propriété de leurs parents et pas d'autres). Cette article va traiter d'un autre mécanisme importante du CSS : la cascade. L'idée est que toute propriété appliqué à un élément va s'étendre aussi à ces éléménts enfants (voir ). Lors de l'écriture d'une feuille de style, vous allez souvent attribuer à un élément plusieurs sélecteurs. Comment savoir quelles règles s'appliquent finalement à cet élément? Imaginons que je veux repeindre ma chambre (c'est mon élément ex: article) en bleu. Puis de peintre en rose seulement les plinthes, et le pourtour des fenêtres en violet.

<article class="plinthes">"je vais peindre ma chambre en bleu et violet</article>  
<p id="fenêtres"> et mes fenêtres en rose </p>  

  #fenêtres {
  background-color: pink;
  }  
  
  .plinthes {
  background-color: purple;
  }  
  
  article{
  background-color: blue;
  }

Quelle couleur va primer sur les autres dans ma chambre au final?

Pour éviter les conflits ( et une chambre trop bariolée 😉), le mécanisme de la cascade pose plusieurs règles pour imposer un style. Avant toute action pour résoudre un conflit, nous allons nous poser une série de questions par rapport à trois facteurs importants pouvant jouer sur la résolution de celui-ci (par ordre de priorité ):

1. L'importance
2. La spécificité
3. L'ordre dans le source

Imaginons que nous devons départager des personnes en désaccord, on va se poser plusieurs questions pour trancher la discussion:

1. Es-que la source du conflit vient d'une personne en particulier? (l'importance )
2. Sur quoi ces personnes sont en désaccord? (la spécificité des sélecteurs)
3. "le dernier qui a parlé à raison" (l'ordre dans la source)

si le conflit ne réside pas dans l'importance alors cela peut venir de deux sélecteurs qui appliquent chacun un style à un élèment.
On va regarder la spécificité des sélecteurs pour faciliter le choix.
Chaque sélecteur a une place dans la hiérarchie de la spécificité évalué par un poids différent selon qu'il soit un ID, une classe ou un simple élément. Pour connaître le niveau du sélecteur on impose une codification à 4 chiffres.
Il existe quatre catégories distinctes qui définissent le niveau de spécificité d'un sélecteur donné (du plus "lourd" au moins important):

1. Le Code "1 0 0 0 " : Le inline style (présence du style dans le document et non dans la feuille CSS). Un style inline est situé à l'intérieur de votre document XHTML. Il est rattaché directement à l'élément à styliser. Par exemple

2. Le code "0 1 0 0 " : L' ID est un identifiant pour les éléments de vos pages (ex: #fenêtres)

3. Le code "0 0 1 0 " :Les classes, attributs et pseudo-classes.Ce groupe comprend les .classes, [attributes] et les pseudo-classes (ex: .plinthes)

4. Le code "0 0 0 1" Les éléments et pseudo-éléments.(ex: article).

ex: https://www.damienflandrin.fr/blog/post/la-specificite-des-selecteurs-css

Après comparaison des valeurs des sélecteurs, nous pouvons connaître ainsi celui qui emporte la priorité sur l'autre.

Si après avoir questionner les deux précédentes règles nous ne trouvons pas la source du conflit, on se réfère à la règle de l'ordre. Les dernières déclarations ont priorité sur celles antérieures.## 1ère règle : l'importance

Plusieurs entités peu intervenir pour imposer une priorité sur sa feuille de style (par ordre du plus faible en poid au plus important):

1. l'agent user : Les paramètres de navigateur par défaut
2. l' user : l'internaute voulant changer des paramètres pour son confort
3. l'author : le développeur
4. l' author!important
5. L'user !important

❗ la déclaration !important placé à la suite de la valeur déclare la priorité sur toute les autres déclarations (à utiliser très rarement car change la cascade naturelle du code).

si le conflit ne réside pas dans l'importance alors cela peut venir de deux sélecteurs qui appliquent chacun un style à un élèment.
On va regarder la spécificité des sélecteurs pour faciliter le choix.
Chaque sélecteur a une place dans la hiérarchie de la spécificité évalué par un poids différent selon qu'il soit un ID, une classe ou un simple élément. Pour connaître le niveau du sélecteur on impose une codification à 4 chiffres.
Il existe quatre catégories distinctes qui définissent le niveau de spécificité d'un sélecteur donné (du plus "lourd" au moins important):

1. Le Code "1 0 0 0 " : Le inline style (présence du style dans le document et non dans la feuille CSS). Un style inline est situé à l'intérieur de votre document XHTML. Il est rattaché directement à l'élément à styliser. Par exemple

2. Le code "0 1 0 0 " : L' ID est un identifiant pour les éléments de vos pages (ex: #fenêtres)

3. Le code "0 0 1 0 " :Les classes, attributs et pseudo-classes.Ce groupe comprend les .classes, [attributes] et les pseudo-classes (ex: .plinthes)

4. Le code "0 0 0 1" Les éléments et pseudo-éléments.(ex: article).

ex: https://www.damienflandrin.fr/blog/post/la-specificite-des-selecteurs-css

Après comparaison des valeurs des sélecteurs, nous pouvons connaître ainsi celui qui emporte la priorité sur l'autre.

Si après avoir questionner les deux précédentes règles nous ne trouvons pas la source du conflit, on se réfère à la règle de l'ordre. Les dernières déclarations ont priorité sur celles antérieures.

la règle CSS de l'héritage veut que tout éléments dit "enfants" héritent des valeurs de propriété de son élément "parent". Pour contrôler l'héritage il y a 4 valeurs universelles :

1. Inherit "je reconnait ma parenté officiellement et je prends l'héritage"
2. Initial "je renis mon parent et son héritage, je prends les règles du navigateur " 3.Unset "allez je fais table raz du passée, j'oublies toutes les règles posées jusqu'à maintenant et je reviens naturellement à l'héritage"
   4.revert "si on avait pas changé ma valeur à l'origine..."