Tutoriel CSS - Leçon 2 - Commencer à utiliser le CSS. Propriétés CSS background, color.

05/07/2025, by Ivan

Bonjour à tous. Donc, dans la leçon précédente, j'ai créé deux fichiers html et css. Voici leur code :

index.html :

<html>
 <head>
  <title>Tutoriel CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p>Apprenez le CSS avec drupalbook.org</p>
  <p>2ème ligne apprenez le CSS avec drupalbook.org</p>
 </body>
</html>

style.css :

body {
  background: #eeeeee; /* fond de la page */
  font-size: 14px;     /* taille de la police */
}
p {
  color: #ff0000; /* couleur du texte */
}

Dans cette leçon, nous continuons à étudier le CSS et allons ajouter des couleurs et des styles à notre modèle. Commençons par la propriété background que nous avons déjà définie pour body :

body {
  background: #eeeeee; /* fond de la page */
  font-size: 14px;     /* taille de la police */
}

Comme vous pouvez le voir, notre page a un fond gris :

CSS

Commençons par comprendre la syntaxe CSS dans le fichier. Toutes les propriétés CSS commencent par un sélecteur qui indique à quel élément elles s’appliquent, par exemple les sélecteurs body, p, .class, #id. Vous remarquerez que certains sélecteurs sont précédés d’un point ou d’un dièse. Le point est utilisé pour cibler les éléments (un ou plusieurs) d’une certaine classe, le dièse pour un élément avec un id spécifique. Voici un exemple :

<html>
 <head>
  <title>Tutoriel CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <div class="green">
    <p>Apprenez le CSS avec drupalbook.org</p>
  </div>
  <div id="blue">
    <p>2ème ligne apprenez le CSS avec drupalbook.org</p>
  </div>
 </body>
</html>

J’ai ajouté deux blocs avec une classe green et un id blue, maintenant j’écris du CSS pour eux :

body {
  background: #eeeeee; /* fond de la page */
  font-size: 14px;     /* taille de la police */
}

.green {
  color: #00ff00; /* couleur du texte */
}

#blue {
  color: #0000ff; /* couleur du texte */
}

CSS green color

Comme vous voyez, sans point ou dièse, on écrit le CSS pour la balise body, de même sans symbole pour d’autres balises comme p, span, ul, li, etc. Avec un point, on écrit le CSS pour les éléments d’une certaine classe, avec un dièse, on écrit le CSS pour un élément avec un id spécifique. Il serait utile de garder cela en mémoire pour ne pas se tromper :

Point — pour les classes

Dièse — pour les id

Sans point ni dièse — pour les balises sans classe ni id

Après avoir indiqué le sélecteur (balise, classe ou id), on écrit le CSS entre accolades {} :

body { /* balise */

}

.green { /* classe */

}

#blue { /* id */

}

Comme vous le savez d’après mon cours court sur HTML, class et id sont des attributs universels des balises HTML, on peut donc les assigner à n’importe quelle balise. Ainsi, parmi plusieurs balises p, span, li, on peut définir des styles CSS différents pour certaines balises spécifiques.

Dans les accolades, on écrit les propriétés CSS. Commençons par la propriété simple color. Color définit la couleur du texte. On écrit d’abord le nom de la propriété, puis après deux-points la valeur. Pour color, on peut utiliser une notation numérique hexadécimale ou une valeur littérale :

.green {
  color: #00ff00; /* couleur du texte */
}

#blue {
  color: #0000ff; /* couleur du texte */
}

/* équivalent */

.green {
  color: green; /* couleur du texte */
}

#blue {
  color: blue; /* couleur du texte */
}

Dans la notation hexadécimale à 6 chiffres, on place un dièse avant le nombre ; les deux premiers chiffres indiquent la quantité de rouge, les troisième et quatrième la quantité de vert, les cinquième et sixième la quantité de bleu. C’est le modèle RGB (Red - rouge, Green - vert, Blue - bleu). Les chiffres hexadécimaux vont de 0 à 9 puis de A à F, où A vaut 10, B 11, etc. Photoshop aide bien à choisir une couleur hexadécimale : choisissez la couleur dans la palette.

colorpicker

Maintenant que vous savez choisir une couleur pour la propriété color, vous pouvez aussi choisir une couleur pour la propriété background. Changeons la couleur du fond et rendons le texte plus lisible :

body {
  background: #fafafa; /* fond de la page */
  color: #333; /* couleur de tout le texte sur la page */
}

.green {
   /* couleur du texte */
}

#blue {
   /* couleur du texte */
}

Quand vous écrivez plusieurs propriétés CSS, utilisez un point-virgule pour marquer la fin de chaque propriété. Maintenant la page est plus lisible :

HTML CSS

Ajoutons encore un peu de vert et de bleu :

index.html :

<html>
 <head>
  <title>Tutoriel CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p><span id="blue">Apprenez le CSS</span> avec <span class="green">drupalbook.org</span></p>
  <p>2ème ligne apprenez le CSS avec <span class="green">drupalbook.org</span></p>
 </body>
</html>

et style.css :

body {
  background: #fafafa; /* fond de la page */
  color: #333;
}

.green {
  color: #26e921; /* couleur du texte */
}

#blue {
  color: #0f15f3; /* couleur du texte */
}

HTML CSS

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

Tutoriel CSS - Leçon 2 - Commencer à utiliser le CSS. Propriétés CSS background, color.