Aller au contenu principal

9-1 Intégrer du CSS à une page

Pour cet exercice, ajoutons une feuille de style à une page HTML et amusons-nous à ajouter quelques styles pour changer l'apparence de la page, simplement à l'aide de CSS.

Étape 1: Créer la structure de base​

Créez un nouveau dossier (ex.: pratique/9_1) pour le tutoriel et ajoutez un fichier index.html avec le contenu suivant:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rétro Arcade - Salle de jeux vidéo</title>
</head>
<body>
    <header>
        <h1>🕹️ Rétro Arcade</h1>
        <p>La meilleure salle d'arcade depuis 1985!</p>
    </header>

    <main>
        <section>
            <h2>Nos Jeux Classiques</h2>
            
            <article class="jeu">
                <h3>Pac-Man</h3>
                <p class="description">Le classique absolu! Mangez tous les points en évitant les fantômes.</p>
                <p class="prix">25¢ la partie</p>
            </article>

            <article class="jeu" id="vedette">
                <h3>Space Invaders</h3>
                <p class="description">Défendez la Terre contre l'invasion alien!</p>
                <p class="prix">25¢ la partie</p>
                <p class="highlight">⭐ Jeu de la semaine - 2 parties pour 25¢!</p>
            </article>

            <article class="jeu nouveau">
                <h3>Street Fighter II</h3>
                <p class="description">Le classique des jeux de combat!</p>
                <p class="prix nouveau">50¢ la partie</p>
            </article>

            <article class="jeu nouveau populaire">
                <h3>Mortal Kombat</h3>
                <p class="description">FINISH HIM! Le combat ultime vous attend.</p>
                <p class="prix nouveau">50¢ la partie</p>
                <p class="highlight">🔥 Le plus joué ce mois-ci!</p>
            </article>
        </section>

        <section class="info">
            <h2>Informations</h2>
            <p class="info-horaire">Ouvert tous les jours de 10h à 23h</p>
            <p class="info-adresse">123 rue des Pixels, Ville-Arcade</p>
        </section>
    </main>

    <footer>
        <p>© 2024 Rétro Arcade - Gardons les classiques vivants!</p>
    </footer>
</body>
</html>

Étape 2: Ajouter un fichier CSS​

**Ajoutons un fichier CSS à notre structure de fichier pour y contenir les styles du site web.

  1. **Créez un dossier styles** au même niveau que votre fichier index.html img

  2. Ajoutez un fichier app.css sous le dossier styles img

    info

    Le fichier a été nommé app.css comme dans "application", soit le style de l'application.

  3. Faire un lien entre votre fichier HTML et CSS. Pour que index.html puisse faire usage de app.css, on doit les lier ensemble via la balise link. Ajoutez la référence dans la portion head de votre fichier index.html:

    index.html
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./styles/app.css">  
      <title>Rétro Arcade - Salle de jeux vidéo</title>
    </head>

Étape 3: Premier style CSS (couleur d'arrière-plan)​

Commençons par ajouter une couleur d'arrière-plan. Pour cela, on peut cibler la balise body et la règle CSS background-color.

  1. Dans le fichier CSS. ajoutez le sélecteur body pour cibler l'élément

    styles/app.css
    body {

    }

  2. Ajoutez une couleur d'arrière-plan à l'aide de la règle background-color

    styles/app.css
    body {
      background-color: palegoldenrod;
    }
    info

    Ici j'ai choisi un jaune pâle un peu rétro, mais vous pouvez modifier pour une couleur de votre choix. Nous verrons comment préciser une couleur en hexadécimal ou encore via ses couleurs rbg, mais pour l'instant pour pouvez utiliser l'une des couleurs prédéfinies suivantes: https://www.w3.org/wiki/CSS/Properties/color/keywords

Vous devriez avec un résultat ressemblant à ceci.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/app.css">  
  <title>Rétro Arcade - Salle de jeux vidéo</title>
</head>
<body>
  <header>
      <h1>🕹️ Rétro Arcade</h1>
      <p>La meilleure salle d'arcade depuis 1985!</p>
  </header>

  <main>
      <section>
          <h2>Nos Jeux Classiques</h2>
          
          <article class="jeu">
              <h3>Pac-Man</h3>
              <p class="description">Le classique absolu! Mangez tous les points en évitant les fantômes.</p>
              <p class="prix">25¢ la partie</p>
          </article>

          <article class="jeu" id="vedette">
              <h3>Space Invaders</h3>
              <p class="description">Défendez la Terre contre l'invasion alien!</p>
              <p class="prix">25¢ la partie</p>
              <p class="highlight">⭐ Jeu de la semaine - 2 parties pour 25¢!</p>
          </article>

          <article class="jeu nouveau">
              <h3>Street Fighter II</h3>
              <p class="description">Le classique des jeux de combat!</p>
              <p class="prix nouveau">50¢ la partie</p>
          </article>

          <article class="jeu nouveau populaire">
              <h3>Mortal Kombat</h3>
              <p class="description">FINISH HIM! Le combat ultime vous attend.</p>
              <p class="prix nouveau">50¢ la partie</p>
              <p class="highlight">🔥 Le plus joué ce mois-ci!</p>
          </article>
      </section>

      <section class="info">
          <h2>Informations</h2>
          <p class="info-horaire">Ouvert tous les jours de 10h à 23h</p>
          <p class="info-adresse">123 rue des Pixels, Ville-Arcade</p>
      </section>
  </main>

  <footer>
      <p>© 2024 Rétro Arcade - Gardons les classiques vivants!</p>
  </footer>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Étape 4: Modifier la police de caractères​

Modifions la police de caractère pour tout le document!

La règle CSS pour la police de caractère est font-family, suivie du nom d'une police.

styles/app.css
body {
  background-color: palegoldenrod;
  font-family: Arial, sans-serif;
}

Vous remarquerez que la police de caractère est maintenant Arial, pour tout le document! 😊

Étape 5: Modifier la couleur des titres​

Modifier la couleur du h1​

Commençons par modifier la couleur du titre de la page, soit le h1. On ciblera l'élément via le sélecteur h1 et la règle CSS pour changer la couleur du texte est color.

styles/app.css
body {
  background-color: palegoldenrod;
  font-family: Arial, sans-serif;
}

h1 {
  color: crimson;
}

Cela aura pour effet de changer la couleur du h1! La couleur devrait être dans les tons de rouge.

Modifier la couleur des h2 et h3​

La page contient des h2 et des h3. Assignons-leur la même couleur.

Pour cela, on pourrait être tenté de faire:

styles/app.css
body {
  background-color: palegoldenrod;
  font-family: Arial, sans-serif;
}

h1 {
  color: crimson;
}

h2 {
  color: seagreen;
}

h3 {
  color: seagreen;
}

... mais c'est de la répétition! Il est possible en CSS d'assigner le même style à plusieurs éléments en visant plusieurs sélecteurs, séparés par une virgule:

styles/app.css
body {
  background-color: palegoldenrod;
  font-family: Arial, sans-serif;
}

h1 {
  color: crimson;
}

h2, h3 {
  color: seagreen;
}

Étape 6: Utiliser les sélecteurs de classe​

Remarquez que les jeux ont un attribut class="jeu" et que les différentes propriétés du jeu ont aussi des classes. L'avantage est que nous pourrons cibler la classe jeu et ainsi modifier le style de tous les jeux à la fois!

  1. Pour cibler une classe CSS, on précède le nom de la classe à d'un ".":
    styles/app.css
    body {
      background-color: palegoldenrod;
      font-family: Arial, sans-serif;
    }

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

    h2, h3 {
      color: seagreen;
    }

    .jeu {
      
    }
  2. Ensuite, on peut appliquer les règles CSS voulus. Commençons par une bordure de 2px de large, continue et de couleur rougeâtre.
    styles/app.css
    body {
      background-color: palegoldenrod;
      font-family: Arial, sans-serif;
    }

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

    h2, h3 {
      color: seagreen;
    }

    .jeu {
      border: 2px solid indianred;
    }
  3. Pour faire respirer un peu le contenu, ajoutons une marge en haut et en bas de chaque jeu. 
    .jeu {
      border: 2px solid indianred;
      margin-top: 10px;
      margin-bottom: 10px;
    }

Étape 7: Utiliser les sélecteurs d'id.​

Dans le HTML, un jeu a l'identifiant id="vedette" puisqu'il est en vedette. Nous appliquerons un arrière-plan à ce jeu.

  1. Pour cibler un id, on précède le nom du symbole #.

    body {
      background-color: palegoldenrod;
      font-family: Arial, sans-serif;
    }

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

    h2, h3 {
      color: seagreen;
    }

    .jeu {
      border: 2px solid indianred;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    #vedette {
      
    }

  2. Modifions la couleur de la bordure

    body {
      background-color: palegoldenrod;
      font-family: Arial, sans-serif;
    }

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

    h2, h3 {
      color: seagreen;
    }

    .jeu {
      border: 2px solid indianred;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    #vedette {
      border: 3px solid crimson;
    }
    info

    Remarquez que le sélecteur de id a préséance sur le sélecteur de classe .jeu! C'est le principe de spécificité: le id est plus spécifique que la classe et donc il a préséance!

À cette étape-ci, vous devriez avoir quelque chose comme ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/app.css">  
  <title>Rétro Arcade - Salle de jeux vidéo</title>
</head>
<body>
  <header>
      <h1>🕹️ Rétro Arcade</h1>
      <p>La meilleure salle d'arcade depuis 1985!</p>
  </header>

  <main>
      <section>
          <h2>Nos Jeux Classiques</h2>
          
          <article class="jeu">
              <h3>Pac-Man</h3>
              <p class="description">Le classique absolu! Mangez tous les points en évitant les fantômes.</p>
              <p class="prix">25¢ la partie</p>
          </article>

          <article class="jeu" id="vedette">
              <h3>Space Invaders</h3>
              <p class="description">Défendez la Terre contre l'invasion alien!</p>
              <p class="prix">25¢ la partie</p>
              <p class="highlight">⭐ Jeu de la semaine - 2 parties pour 25¢!</p>
          </article>

          <article class="jeu nouveau">
              <h3>Street Fighter II</h3>
              <p class="description">Le classique des jeux de combat!</p>
              <p class="prix nouveau">50¢ la partie</p>
          </article>

          <article class="jeu nouveau populaire">
              <h3>Mortal Kombat</h3>
              <p class="description">FINISH HIM! Le combat ultime vous attend.</p>
              <p class="prix nouveau">50¢ la partie</p>
              <p class="highlight">🔥 Le plus joué ce mois-ci!</p>
          </article>
      </section>

      <section class="info">
          <h2>Informations</h2>
          <p class="info-horaire">Ouvert tous les jours de 10h à 23h</p>
          <p class="info-adresse">123 rue des Pixels, Ville-Arcade</p>
      </section>
  </main>

  <footer>
      <p>© 2024 Rétro Arcade - Gardons les classiques vivants!</p>
  </footer>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Étape 8: Sélecteurs de classe multiples​

Remarquez que deux éléments portent la classe nouveau:

<article class="jeu nouveau">
    <h3>Street Fighter II</h3>
    <p class="description">Le classique des jeux de combat!</p>
    <p class="prix nouveau">50¢ la partie</p>
</article>

Pour appliquer un style spécifique au jeu et un autre style au prix, qui ont tous deux la classe nouveau, on peut utiliser le principe de sélecteur multiple:

body {
    background-color: palegoldenrod;
    font-family: Arial, sans-serif;
}

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

h2, h3 {
    color: seagreen;
}

.jeu {
    border: 2px solid indianred;
    margin-top: 10px;
    margin-bottom: 10px;
}

#vedette {
    border: 3px solid crimson;
}

.jeu.nouveau {
    border: 3px solid seagreen;
}

.prix.nouveau {
    color: purple;
}
info

Combiner deux sélecteurs, séparés par le point a pour effet de cibler un élément ayant TOUTES les classes mentionnées. Donc ici, aurant jeu ET nouveau pour le jeu.