CSS (Cascading Style Sheets) permet de créer de belles pages web. Mais qu'en est-il sous le capot ? Cet artice explique ce que sont les CSS, comment le navigateur transforme le HTML en Modèle d'Objet Document (Document Object ModelDOM), comment les CSS sont appliquées aux parties du (DOM). Nous verrons également quelques exemples de syntaxe élémentaire et quel est le code utilisé pour incorporer réellement les CSS dans la page web.

Prérequis : Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML.)
Objectif : Apprendre ce que sont les CSS et comment elle opère au niveau basique.

Que sont les CSS ?

Comme nous l'avons déjà mentionné, CSS est un langage permettant de préciser comment les documents sont présentés aux utilisateurs — comment ils sont stylisés, mis en page, etc.

Un document est généralement un fichier texte structuré à l'aide d'un langage de balisageHTML est le plus courant, mais vous rencontrerez aussi d'autres langages de balisage tels que SVG ou XML.

Présenter un document à un utilisateur signifie le convertir sous une forme utilisable pour le public. Les navigateurs, comme Firefox, Chrome ou Internet Explorer, sont conçus pour opérer un présentation visuelle des documents, par exemple, sur un écran d'ordinateur, un projecteur ou une imprimante.

Comment les CSS influent-elles le HTML ?

Les navigateurs Web appliquent les règles des CSS à un document pour en modifier l'affichage. Une règle CSS se  forme à partir de :

  • un ensemble de propriétés, dont les valeurs sont définies de façon à modifier comment le contenu HTML est affiché, par exemple Je voudrais que la largeur de mon élément soit 50 % de celle de son parent et que son arrière‑plan soit rouge.
  • un sélecteur, qui sélectionne le ou les éléments sur lesquel vous voulez appliquer les valeurs de propriété mises à jour.  Par exemple, Je voudrais appliquer mes règles CSS à tous mes paragraphes dans mon document HTML.

Un ensemble de règles CSS contenues dans une feuille de style détermine l'apparence d'une page Web. Vous en apprendrez beaucoup plus sur la syntaxe CSS dans le prochain article du module — Syntaxe des CSS.

Un rapide exemple de CSS

Les descriptions ci-dessus peuvent ou non avoir un sens, alors assurons-nous que les choses sont claires en présentant un exemple rapide. Tout d'abord, prenons un simple document HTML, contenant un <h1> et un <p>. (remarquez qu'une feuille de style est appliquée au HTML à l'aide d'un élément <link> :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon expérimentation de CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Salut, ô Monde !</h1>
    <p>Ceci est mon premier exemple de CSS.</p>
  </body>
</html>

Regardons maintenant un exemple de CSS très simple contenant deux règles :

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

La première règle commence par un sélecteur h1, ce qui signifie que ses valeurs de propriété seront appliquée à l'élément <h1>. Il contient trois propriétés et leurs valeurs (chaque paire propriété/valeur est appelée une déclaration) :

  1. la première règle la couleur du texte sur du bleu.
  2. la seconde fixe la couleur du fond à jaune.
  3. la troisième met autour du titre un cadre de 1 pixel d'épaisseur en trait plein (ni pointillé, ni tireté, etc.) de couleur noire.

 

La deuxième règle commence par le sélecteur p, ce qui signifie qu'il appliquera ses valeurs de propriété à l'élément <p>. Sa déclaration fixe la couleur du texte à rouge.

Dans un navigateur Web, le code ci-dessus produirait le résultat suivant :

Une simple page web contenant un en-tête Salut, ô Monde et un paragraphe qui dit Ceci est mon premier exemple de CSS.

Ce n'est pas terrible, mais au moins cela commence à vous donner une idée du fonctionnement des CSS.

Apprentissage actif : écriture de votre premier CSS

Maintenant, nous allons vous donner la possibilité d'écrire votre propre bout de CSS. Vous pouvez le faire dans les zones de saisie ci-dessous avec l'exemple modifiable en direct. De manière similaire à ce que vous avez vu ci-dessus, vous avez quelques éléments HTML de base et quelques propriétés CSS. Essayez d'ajouter quelques déclarations simples au CSS pour modifier le style du HTML.

Si vous faites une erreur, vous pouvez toujours revenir en arrière avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez Voir la solution pour voir l'une des solutions possibles.

Comment fonctionnent vraiment les CSS ?

Lorsqu'un navigateur affiche un document, il doit combiner le contenu du document avec les règles de mise en forme. Pour cela, il traite le document en deux étapes :

  1. Le navigateur convertit le contenu HTML et le CSS dans le DOM (Document Object Model ou « Modèle objet du document »). Le DOM représente le document dans la mémoire de l'ordinateur. Pour cela il combine le contenu et la mise en forme (le style).
  2. Le navigateur affiche le contenu du DOM.

À propos du DOM

Un DOM possède une structure semblable à celle d'un arbre. Tout élément, attribut ou fragment de texte décrit avec le langage de balises devient un nœud de la structure. Les nœuds sont définis par leurs relations avec d'autres nœuds DOM. Certains éléments sont les parents de nœuds enfants et les nœufs enfants possèdent des nœuds parents.

Bien comprendre le DOM pourra vous aider à mieux concevoir, déboguer et maintenir votre code CSS. En effet, le DOM est l'endroit où le CSS est fusionné avec le contenu du document.

La représentation du DOM

Plutôt que d'employer une explication longue et soporifique, prenons un exemple pour voir comment le DOM et CSS fonctionnent ensemble.

Utilisons le code HTML suivant comme exemple :

<p>
  Utilisons :
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheet</span>
</p>

Dans le DOM, le nœud correspondant à notre élément <p> est un parent. Ses enfants sont : un nœud de texte puis des nœuds qui correspondent aux éléments <span>. Les nœuds SPAN sont eux-mêmes des nœuds parents dont les enfants sont les textes qu'ils contiennent :

P
├─ "Utilisons :"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheet"

Voici comment un navigateur interprète ce fragment de code HTML — il l'affiche l'arbre DOM ci‑dessus, puis en effectue le rendu dans le navigateur comme ceci :

Application des CSS au DOM

Supposons que nous ajoutions du CSS à ce document, pour lui donner un style. Encore une fois, le HTML est le suivant :

<p>
  Utilisons :
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Appliquons lui le CSS suivant :

span {
  border: 1px solid black;
  background-color: lime;
}

Le navigateur analysera le HTML et créera un DOM à partir de ce dernier, puis il analysera le CSS. Comme la seule règle disponible dans le CSS a un sélecteur pour span, il appliquera cette règle à chacun des trois span. Le résultat actualisé est le suivant :

Comment appliquer les CSS aux HTML

Il y a trois façons différentes d'appliquer les CSS à un document HTML : vous les rencontrerez couramment, certaines plus utiles que d'autres. Passons brièvement en revue chacune d'entre elles.

Feuille de style externe

Vous avez déjà vu des feuilles de style externes dans cet article, mais pas sous ce nom. Une feuille de style est dite externe quand le CSS est écrit dans un fichier séparé avec une extension .css et que vous y faites référence à partir d'un élément HTML <link>. Le fichier HTML ressemble à ceci :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon expérimentation de CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Salut, ô Monde !</h1>
    <p>Ceci est mon premier exemple de CSS.</p>
  </body>
</html>

Et le fichier CSS :

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Cette méthode est sans doute la meilleure, car vous pouvez utiliser une feuille de style pour styliser plusieurs documents, et vous n'auriez besoin de mettre à jour le CSS qu'à un seul endroit si des changements étaient nécessaires.

Feuille de style interne

Une feuille de style est dite interne quand il n'y a pas de fichier CSS indépendant, mais que le CSS est placé dans un élément <style>, contenu dans l'en‑tête du HTML. Le HTML ressemble alors à ceci :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon expérimentation de CSS</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Salut, ô Monde!</h1>
    <p>Ceci est mon premier exemple de CSS.</p>
  </body>
</html>

Cela peut être utile dans certaines circonstances (peut-être que vous travaillez avec un système de gestion de contenu dans lequel vous ne pouvez pas modifier les fichiers CSS directement), mais ce n'est pas aussi efficace que les feuilles de style externes — sur un site Web, le CSS devrait être répété sur chaque page et mis à jour dans plusieurs endroits si des changements étaient nécessaires.

Styles en ligne

Les styles en ligne sont des déclarations CSS qui ne portent que sur un élément uniquement ; ils sont contenus dans un attribut style :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon expérimentation de CSS</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Salut, ô Monde!</h1>
    <p style="color:red;">Ceci est mon premier exemple de CSS.</p>
  </body>
</html>

 

Ne faites pas cela, à moins d'y être obligé ! C'est vraiment mauvais pour la maintenance (vous pourriez avoir à mettre à jour les mêmes informations plusieurs fois par document) ;  vous mélangez ainsi les informations des CSS de présentation avec les informations structurelles du HTML ; le CSS en est plus difficile à lire et à comprendre. Garder distincts et purs les divers types de code facilite beaucoup le travail de ceux qui y travaillent.

Un environnement de travail vraiment restrictif (quand votre CMS vous permet seulement d'éditer le corps HTML) est le seul cas où l'utilisation des styles en ligne est envisageable.

À la suite ...

Vous devriez désormais être capable de mieux comprendre comment les navigateurs utilisent CSS. Le prochain article sera consacré à la syntaxe des CSS.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, marcagba, SphinxKnight, AnthonyMaton
Dernière mise à jour par : Dralyab,