Cours CSS / Qu’est-ce que le CSS et quelle est sa différence avec le HTML ?

Le CSS (Cascading Style Sheets) contrôle l'apparence et la mise en page d'un document HTML, y compris les couleurs, les polices, les espacements et le placement des éléments. Le HTML décrit le contenu et sa structure ; le CSS détermine comment cette structure est présentée.

Comment HTML et CSS se partagent les responsabilités

Imaginez que vous créez une page d'information sur le jardin. Le fait que « Petit Jardin » (Small Garden dans les exemples) soit le titre le plus important de la page est représenté par h1 en HTML. Le CSS détermine si le titre est affiché en vert et quelle est la taille de la police. Le fait que la couleur soit verte ne signifie pas qu'un paragraphe ordinaire a la signification d'un titre.

JavaScript est un langage de programmation qui ajoute du comportement aux pages web. Le CSS peut également changer la forme ou montrer une animation lorsque la souris survole un élément, donc changer l'écran ne signifie pas nécessairement que JavaScript a été utilisé. Ici, nous nous concentrons d'abord sur la séparation du contenu et de l'apparence.

Pourquoi une page a des styles avant que vous n'écriviez du CSS

Les navigateurs ont des styles par défaut. C'est pourquoi les titres apparaissent en grand, il y a de l'espace entre les paragraphes et les liens apparaissent soulignés sans avoir à écrire de CSS directement. Les polices et marges par défaut peuvent varier selon le navigateur et les paramètres de l'utilisateur. En ajoutant du CSS, vous pouvez personnaliser l'apparence dont vous avez besoin.

Collez le HTML suivant dans un éditeur de texte, enregistrez-le sous index.html au format UTF-8, et ouvrez-le dans votre navigateur. Assurez-vous que le nom du fichier n'est pas index.html.txt. Si l'extension du fichier est cachée, vérifiez l'extension dans le format d'enregistrement de l'éditeur et les propriétés du fichier.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Ce fragment est un exemple de la structure du texte. Si vous voulez commencer tout de suite, utilisez l'exemple complet ci-dessous. Si vous lisez d'abord le titre et le texte du guide, il est facile de distinguer si le contenu réel ou seulement l'apparence a changé lors de la modification du CSS.

Lire les sélecteurs, les propriétés et les valeurs

h1 {
  color: #087f5b;
}

h1 est le sélecteur, color est la propriété, et #087f5b est sa valeur. Une propriété et une valeur reliées par deux-points forment une déclaration, telle que color: #087f5b;. La couleur hexadécimale à six chiffres représente les composants rouge, vert et bleu. Pour plus de détails, voir CSS Syntaxe : Sélecteurs, Déclarations, Commentaires et Erreurs.

Cette règle change la couleur du texte de l'élément h1 en HTML en vert. Elle ne traduit pas les phrases et n'ajoute pas de paragraphes. Pour distinguer et décorer uniquement le texte de guide, ajoutez class="notice" au HTML et sélectionnez .notice depuis CSS. Le point est une notation de sélecteur de classe en CSS et n'est pas inclus dans le nom de classe en HTML.

Une explication selon laquelle le CSS est responsable de la présentation des documents web peut également être trouvée dans l’introduction au CSS de MDN.

Exécutez l'exemple complet Small Garden

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Lorsque vous ouvrez le fichier enregistré, vous verrez un titre vert sur un fond clair, et les informations sur les heures d'ouverture auront une bordure et un espace. Le contenu à l'intérieur de l'élément style est du CSS. Le tableau suivant fournit une description minimale pour lire les propriétés utilisées dans les exemples.

Vous n'avez pas besoin de mémoriser toutes les propriétés à ce stade. Identifiez d'abord quel élément correspond au sélecteur et quel aspect de cet élément chaque déclaration modifie. Une feuille de style externe vous permet de réutiliser le même design sur plusieurs pages. Pour plus de détails, voir Appliquer du CSS avec des styles en ligne, internes et externes.

Changez trois valeurs et comparez les résultats

1. Dans la règle h1, remplacez la valeur de color par #1d4ed8. Si vous enregistrez et rechargez, seul le grand titre sera bleu. Les couleurs des h2 et des paragraphes généraux du guide du visiteur ne sont pas soumises à cette règle.
2. Changez line-height de body de 1.7 à 2. La hauteur de ligne du corps sera plus grande. Vous pouvez voir plus facilement les différences en insérant un paragraphe de plus de deux lignes ou en réduisant la fenêtre.
3. Dans la règle .notice, remplacez la valeur de background-color par #fff4cc. Seul le fond des informations sur les horaires d'ouverture devient jaune. Le fond de toute la page est spécifié séparément dans le corps, donc il reste le même.

Au lieu de changer les trois valeurs en même temps, enregistrez et vérifiez à chaque fois que vous modifiez un élément. Si les résultats sont différents, vérifiez si le fichier modifié et le fichier ouvert dans le navigateur sont les mêmes et si les accolades et les deux-points sont toujours présents. Une fois que vous avez terminé l'exercice, rétablissez les trois valeurs à leur état original, actualisez, et comparez avec l'écran original. Pendant ce processus, l'élément clé est de maintenir la structure du titre HTML, du paragraphe et du lien.