Les principaux sélecteurs de base

Voici un exemple concret de l'utilisation des sélecteurs.

Nous allons créer le code css qui permet de transformer l'apparence de notre page:

Le fichier HTML de base ressemble à ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple CSS – Série Wednesday</title>
  <style>
    /* 1. Commencer simple avec un sélecteur d'élément (h1, p, ul...) */
    /* 2. Ajouter des classes pour cibler des acteurs ou personnages */
    /* 3. Ajouter un id pour personnaliser un bloc particulier */
  </style>
</head>
<body>

  <h1>Wednesday – Série Netflix</h1>

  <h2>Synopsis</h2>
  <p>
    Wednesday Addams (jouée par Jenna Ortega) rejoint la Nevermore Academy, une école pour élèves marginaux et dotés de pouvoirs particuliers.
  </p>

  <p>
    Elle y rencontre Enid Sinclair, sa colocataire, ainsi que Xavier Thorpe et  Tyler Galpin.
  </p>

  <h2>Personnages principaux</h2>
  <ul>
    <li>Wednesday Addams – Jenna Ortega</li>
    <li>Morticia Addams – Catherine Zeta-Jones</li>
    <li>Enid Sinclair – Emma Myers</li>
    <li>Xavier Thorpe – Percy Hynes White</li>
   </ul>

  <h2>Épisodes de la saison 1</h2>
  <ul>
    <li>Épisode 1 – Wednesday’s Child Is Full of Woe</li>
    <li>Épisode 2 – Woe Is the Loneliest Number</li>
    <li>Épisode 3 – Friend or Woe</li>
    <li>Épisode 4 – Woe What a Night</li>
    <li>Épisode 5 – You Reap What You Woe</li>
    <li>Épisode 6 – Quid Pro Woe</li>
    <li>Épisode 7 – If You Don’t Woe Me by Now</li>
    <li>Épisode 8 – A Murder of Woes</li>
  </ul>

</body>
</html>

Changer la police de caractère

Pour change la police de caractères (l'écriture) de tous les éléments, on va créer une règle pour le body:

body {
    font-family: Arial;
}

Les titres

Pour changer l'apparence de tous les titres, il suffit de créer des règles CSS qui ciblent les H1 et les H2:

h1 {
    color: purple;
    text-align: center;
}

h2 {
    color: dodgerblue;
}

Les meilleurs épisodes

Pour afficher les meilleurs épisodes différemment, nous allons devoir les cibler avec une règle CSS. Pour cela, nous devons ajouter une class à ces épisodes:

<ul>
    <li>Episode 1: ...</li>
    <li class="best">Episode 2: ...</li>
    <li class="best">Episode 3: ...</li>
    <li>Episode 4: ...</li>

Ensuite nous devons ensuite créer la règle correspondante:

.best {
    font-weight: bold;
    color: orange;
}

Les personnages

Pour afficher les personnages de façon différente, nous devons pouvoir les cibler spécifiquement. Ce qui n'est pas possible dans notre HTML de base. Nous allons donc devoir entourer le texte avec des balises <span>:

  <p>
    <span class="personnage">Wednesday Addams</span> rejoint la Nevermore Academy, une école pour élèves marginaux et dotés de pouvoirs particuliers.
  </p>

.personnage {
    font-weight: bold;
    color: darkgreen;
}

Note: Les balises span n'ont aucun impact visible. Elles servent principalement à appliquer du CSS à du texte.

Marquer un épisode spécifique

Pour change l'apparence d'un épisode spécifique, nous pouvons lui ajouter un id (cet id doit être unqiue sur la page):

<li id="episode8">Episode 8:....</li>

Et ajouter la règle css:

#episode8 {
    font-weight: bold;
    color: tomato;
}

Résultat final

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Exemple CSS – Série Wednesday</title>
  <style>
    body {
      font-family: "Arial"
    }

    h1 {
      color: purple;
      text-align: center;
    }

    h2 {
      color: dodgerblue;
    }

    .best {
      font-weight: bold;
      color: orange;
    }

    p {
      font-family: Arial, sans-serif;
      font-size: 14px;
    }

    .personnage {
      font-weight: bold;
      color: darkgreen;
    }

    .acteur {
      font-style: italic;
      color: navy;
    }

    #episode8 {
      color: tomato;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <h1>Wednesday – Série Netflix</h1>

  <h2>Synopsis</h2>
  <p>
    <span class="personnage">Wednesday Addams</span> rejoint la
    <span id="academie">Nevermore Academy</span>, une école pour élèves
    marginaux et dotés de pouvoirs particuliers.
  </p>

  <p>
    Elle y rencontre <span class="personnage">Enid Sinclair</span>, sa colocataire,
    ainsi que <span class="personnage">Xavier Thorpe</span> et
    <span class="personnage">Tyler Galpin</span>.
  </p>

  <h2>Personnages principaux</h2>
  <ul>
    <li><span class="personnage">Wednesday Addams</span> – <span class="acteur">Jenna Ortega</span></li>
    <li><span class="personnage">Enid Sinclair</span> – <span class="acteur">Emma Myers</span></li>
    <li><span class="personnage">Xavier Thorpe</span> – <span class="acteur">Percy Hynes White</span></li>
    <li><span class="personnage">Tyler Galpin</span> – <span class="acteur">Hunter Doohan</span></li>
    <li><span class="personnage">Morticia Addams</span> – <span class="acteur">Catherine Zeta-Jones</span></li>
    <li><span class="personnage">Gomez Addams</span> – <span class="acteur">Luis Guzmán</span></li>
  </ul>

  <h2>Épisodes de la saison 1</h2>
  <ul>
    <li>Épisode 1 – Wednesday’s Child Is Full of Woe</li>
    <li class="best">Épisode 2 – Woe Is the Loneliest Number</li>
    <li>Épisode 3 – Friend or Woe</li>
    <li>Épisode 4 – Woe What a Night</li>
    <li class="best">Épisode 5 – You Reap What You Woe</li>
    <li>Épisode 6 – Quid Pro Woe</li>
    <li>Épisode 7 – If You Don’t Woe Me by Now</li>
    <li id="episode8">Épisode 8 – A Murder of Woes</li>
  </ul>

</body>

</html>

Les principaux sélecteurs de base - Exemples

Changer la police de caractère

Les titres

Les meilleurs épisodes

Les personnages

Marquer un épisode spécifique

Résultat final

Téléchargements

Fichiers HTML

Pour aller plus loin