Chapitre 10 | Comprendre la cascade en CSS

Comprendre la cascade en CSS

Qu’est-ce que la cascade ?

En CSS, la cascade détermine l’ordre de priorité des règles appliquées à un élément lorsque plusieurs styles sont définis. Cet ordre est influencé par :

1. L’ordre d’apparition dans le code : les règles définies en dernier ont la priorité.
2. La spécificité : les sélecteurs plus spécifiques ont la priorité sur les sélecteurs génériques.

Exemple 1 : Ordre d’apparition

HTML :

<p>Ceci est un paragraphe.</p>

CSS :

/* Première règle */
p {
    color: black;
}

/* Deuxième règle */
p {
    color: red;
}

Résultat :

Le texte sera rouge, car la deuxième règle écrase la première en raison de son apparition plus tard dans le code. Faites le test.

Exemple 2 : Changer l’ordre

HTML :

<p>Ceci est un paragraphe.</p>

CSS :

/* Première règle */
p {
    color: red;
}

/* Deuxième règle */
p {
    color: black;
}

Résultat :

Le texte sera noir, car la dernière règle écrase la précédente.

Exemple 3 : Spécificité avec des classes

HTML :

<p class="example">Ceci est un paragraphe.</p>

CSS :

/* Règle générale */
p {
    color: black;
}

/* Règle plus spécifique */
.example {
    color: blue;
}

Résultat :

Le texte sera bleu, car la règle avec le sélecteur .example est plus spécifique que la règle générale pour <p>.

Exercice :

1. Créez un paragraphe avec une classe et appliquez plusieurs règles pour observer l’ordre de priorité.
2. Testez différentes combinaisons pour comprendre l’impact de la cascade et de la spécificité.

Modifier le style de texte avec CSS : exemples pratiques

Dans cette section, nous allons explorer plusieurs propriétés CSS qui permettent de modifier l’apparence des textes. Toutes les modifications seront appliquées sur une simple balise <p> contenant du texte latin.

Exemple de base :

HTML :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

CSS :

/* Changer la couleur du texte */
p {
    color: darkblue;
}

/* Modifier la taille de la police */
p {
    font-size: 24px;
}

/* Mettre le texte en gras */
p {
    font-weight: bold;
}

/* Ajouter une ligne barrée */
p {
    text-decoration: line-through;
}

/* Mettre le texte en italique */
p {
    font-style: italic;
}

/* Modifier l’espacement des caractères */
p {
    letter-spacing: 2px;
}

/* Modifier l’espacement entre les lignes */
p {
    line-height: 1.8;
}

/* Souligner le texte */
p {
    text-decoration: underline;
}

/* Ajouter une ombre au texte */
p {
    text-shadow: 2px 2px 4px gray;
}

/* Aligner le texte à droite */
p {
    text-align: right;
}

/* Aligner le texte à gauche */
p {
    text-align: left;
}

/* Justifier le texte */
p {
    text-align: justify;
}

Résultat attendu :

Ces styles vont transformer un paragraphe basique en un texte stylisé avec différentes caractéristiques visibles.

Exercice :

Veuillez noter que l’on peut bien sur combiner les déclarations :

p {
    text-decoration: underline;
    text-shadow: 2px 2px 4px gray;
    text-align: right;
}

Veuillez noter que l’on peut bien sur combiner les déclarations et que la cascade s’applique toujours.

p {
    text-decoration: underline;
    text-shadow: 2px 2px 4px gray;
    text-align: right;
    text-align: left; /* Par effet de cascade LEFT sera appliqué et non pas RIGHT */
}

1. Appliquez au moins cinq des styles ci-dessus.
2. Ajoutez un paragraphe avec du texte latin.
3. Expérimentez avec les valeurs pour observer les différences.

!Important

En CSS, les styles appliqués aux éléments HTML suivent des règles hiérarchiques basées sur la cascade, la spécificité et l’ordre des déclarations.

Cependant, il peut arriver que l’on souhaite forcer une règle CSS à s’appliquer, peu importe les autres règles définies ou leur ordre.

Dans ce cas, on utilise !important. Cette propriété permet de bypasser la logique de la cascade et de donner une priorité absolue à une règle. Toutefois, il est recommandé de l’utiliser avec parcimonie, car elle peut rendre le code plus difficile à maintenir.

<h1 class="titre">Ceci est un titre</h1>
<p class="texte">Ceci est un paragraphe</p>

/* Une règle CSS classique */
.titre {
    color: blue;
}

/* Une règle CSS avec !important qui prend le dessus */
.titre {
    color: red !important;
}

/* Même si cette règle vient après, elle ne s'appliquera pas à cause de !important */
.titre {
    color: green;
}

Résultat : le texte du titre sera rouge à cause de !important, même si d’autres règles pourraient s’appliquer selon la cascade normale.