Style visuel avec CSS

  • Les bases

Guides prérequis

Le CSS est un langage de feuille de style, permettant de mettre en forme une page web en choisissant la couleur, les dimensions, la police d’écriture, etc.

C’est un langage très simple, dont le principe est de cibler des éléments HTML et de leur appliquer un style. Par exemple : « tous les paragraphes doivent être de couleur verte. »

Cette feuille de style change la couleur de fond de l’élément <html> (qui correspond à l’ensemble de la page), la couleur du texte des paragraphes <p>, et la couleur du texte ainsi que du fond des titres <h1>.

Il existe de nombreuses syntaxes pour spécifier une couleur en CSS, les plus connues étant les suivantes. Tu peux utiliser un des mots-clés disponibles, par exemple beige, ou bien indiquer des valeurs rouge-vert-bleu, avec la syntaxe rgb(66, 135, 245) ou avec un code hecadécimal #4287f5.

Hexadéci-quoi ?

L’hexadécimal est un système de numération qui permet de compter avec des lettres pour faire rentrer des grands nombres en peu de caractères. Pour représenter une couleur, on utilise généralement les valeurs rouge, vert et bleu, chacune allant de 0 à 255 selon l’intensité. Les codes hexadécimaux permettent de représenter ces trois nombres en seulement six caractères.

À toi de jouer !

Cherche « sélecteur de couleurs » sur Internet et choisis une couleur. Obtiens son code hexadécimal, qui doit commencer par un #. Utilise-le dans la feuille CSS ci-dessus pour remplacer la couleur du texte.

Anatomie d’une règle CSS

Une règle CSS commence par un sélecteur, ici p, suivi d’une ou plusieurs déclarations entre accolades {}. Les déclarations sont séparées par des points-virgules ;.

CSS
p {
  color: blue;
  background-color: yellow;
}

Il est possible d’appliquer une règle à plusieurs sélecteurs en même temps, séparés par des virgules :

CSS
p,
li,
h3 {
  color: blue;
}

Mise en forme

Il est courant de retourner à la ligne de cette manière pour la lisibilité, mais ce n’est pas obligatoire.

Les classes

Au début, tu as vu comment changer la couleur de tous les <p>, mais parfois, il serait utile de changer la couleur de certains <p> spécifiques, pour afficher des bandeaux d’avertissement par exemple. Pour différencier ces <p> des autres, tu dois leur appliquer une classe dans le HTML.

HTML
<p>Ceci est un texte parfaitement normal.</p>
<p class="warning">Ceci est un avertissement crucial !</p>

Tu peux ensuite utiliser le sélecteur de classe en CSS, qui commence par un point.

CSS
.warning {
  background-color: moccasin;
}
Résultat

Les classes HTML servent uniquement à identifier des éléments dans ton CSS et ton code JavaScript. N’hésite pas à les nommer comme bon te semble. Un même élément peut avoir plusieurs classes séparées par un espace :

HTML
<p class="warning big">Grand avertissement !</p>
CSS
.warning {
  background-color: moccasin;
}
.big {
  font-size: 24px;
}
Résultat

À toi de jouer !

Voici une feuille de style qui contient des sélecteurs de classe. Dans l’onglet HTML, ajoute des attributs class aux éléments pour correspondre à leurs besoins.
Onglet verrouillé
Objectif

Les sélecteurs combinés

Tu peux combiner plusieurs sélecteurs pour former une règle plus précise. En collant des sélecteurs ensemble, les éléments doivent répondre à toutes les conditions pour être ciblés :

CSS
p.poem { ... }

Le sélecteur ci-dessus cible uniquement les <p> qui ont la classe poem.

En séparant les sélecteurs d’un espace, tu indiques une relation de descendance :

CSS
article p { ... }

Ce sélecteur cible uniquement les <p> qui sont imbriqués dans un <article>. L’élément <p> peut être imbriqué à plusieurs niveaux de descendance, tant qu’il possède un <article> dans ses ancêtres.

HTML
<article>
  <div>
    <p>
      Je suis concerné par la règle CSS !
    </p>
  <div>
</article>
<p>Je ne suis pas concerné.</p>

Tu peux maintenant réaliser des combinaisons complexes ! Mais prends garde à ne pas t’emmêler les pinceaux en complexifiant ton CSS inutilement.

CSS
div article p.alert { ... }

Par exemple, ce sélecteur cible les <p> de classe alert s’ils sont situés à l’intérieur d’un <article>, lui même devant être à l’intérieur d’une <div>. Cela fonctionne, mais cela pourrait être simplifié pour être plus facile à lire.

À toi de jouer !

Examine ce document HTML sans le modifier. Puis dans le fichier CSS, modifie le sélecteur pour colorer uniquement l’élément désigné.

Insérer du CSS dans le HTML

Voici une petite astuce. Tu peux utiliser l’attribut style dans tous les éléments HTML pour y insérer des déclarations CSS.

HTML
<p style="color: red; background-color: black;">En rouge et noir !</p>

Cela peut être pertinent si l’élément a un style particulier qui n’est pas présent ailleurs sur le site, ou pour faire des tests rapides avant de rédiger une feuille CSS plus propre. Cependant, il est déconseillé d’utiliser cette technique fréquemment, car elle peut rapidement compliquer ton code. En utilisant des classes et un CSS séparé, il sera plus facile de concevoir un design cohérent car tu réutiliseras les mêmes déclarations plusieurs fois.

Ce que tu as appris

  • Changer les couleurs avec les mots-clés (beige) et les codes hexadécimaux (#)
  • Utiliser les sélecteurs d’élément HTML et de classe
  • Coller les sélecteurs pour former une règle plus précise
  • Séparer les sélecteurs par un espace pour représenter une descendance
Bonjour ! Je suis un assistant IA qui peut te donner des conseils pour réussir les exercices et améliorer ton code. Utilise le bouton « J'ai besoin d'aide » pour m'appeler !