Comprendre CSS et le style des pages web

Auteur : Rédaction Domeny.ForSale Publié le 26.09.2026

En bref : CSS est un langage de feuilles de style qui définit l’apparence et la mise en page des sites web : couleurs, polices, espacements et disposition des éléments. Il complète HTML, qui décrit la structure et le sens du contenu. Grâce à CSS, une même page peut offrir une présentation lisible aussi bien sur un téléphone que sur un grand écran.

Quel est le rôle de CSS et en quoi diffère-t-il de HTML ?

Le sigle CSS signifie Cascading Style Sheets, soit « feuilles de style en cascade ». C’est un langage déclaratif : vous indiquez le résultat souhaité pour un élément, et le navigateur se charge de l’afficher. Vous n’avez pas à décrire étape par étape comment dessiner un bouton ou disposer un paragraphe.

Un formulaire de contact permet de comprendre facilement la répartition des rôles sur une page :

HTML définit les éléments du formulaire : libellés, champs de saisie et bouton d’envoi.
CSS définit la largeur des champs, l’apparence du bouton, les espacements et la disposition du formulaire sur différents écrans.
JavaScript peut gérer des comportements supplémentaires, par exemple l’envoi des données sans recharger la page.

CSS ne remplace pas un code HTML correct. Donner à un simple fragment de texte l’apparence d’un titre ne suffit pas à en faire un titre pour les technologies d’assistance. L’apparence d’un élément et sa signification sont deux choses distinctes.

Les feuilles de style permettent aussi de séparer la présentation du contenu. Un seul fichier CSS partagé peut modifier l’apparence des boutons sur plusieurs pages, sans avoir à éditer chaque bouton séparément.

À quoi ressemble une règle CSS ?

Une règle CSS se compose d’un sélecteur, qui désigne les éléments concernés, et de déclarations, qui définissent leur apparence. Chaque déclaration contient une propriété et la valeur qui lui est attribuée.

p {
  color: #222222;
  font-size: 18px;
  line-height: 1.6;
}

Le sélecteur p désigne tous les paragraphes. La propriété color définit la couleur du texte, font-size sa taille et line-height la hauteur de ligne. Dans cet exemple, la hauteur de ligne vaut 1,6 fois la taille de la police, ce qui laisse davantage d’espace vertical au texte.

Vous ne souhaitez toutefois pas toujours modifier tous les éléments d’un même type. Une classe est un nom attribué à un élément dans HTML, qui permet de le cibler dans CSS. Un sélecteur de classe commence par un point :

.miseEnEvidence {
  background-color: #fff4cc;
  padding: 16px;
  border-radius: 8px;
}

Cette règle donne un fond clair, un espacement intérieur et des coins arrondis aux éléments portant la classe miseEnEvidence. Écrire ce nom dans la feuille de style ne suffit pas : la classe doit aussi être attribuée à l’élément concerné dans HTML.

Que signifie la cascade et pourquoi un style peut-il être remplacé ?

Plusieurs règles peuvent correspondre à un même élément. La cascade est le mécanisme qui détermine quelle déclaration sera appliquée lorsque différentes règles définissent la même propriété.

Il ne suffit pas de retenir que « la dernière déclaration l’emporte toujours ». Le navigateur tient notamment compte de l’origine et de l’importance des déclarations, des couches de cascade et de la spécificité, c’est-à-dire du poids du sélecteur. À conditions égales par ailleurs, l’ordre des déclarations compte.

p {
  color: navy;
}

.remarque {
  color: darkred;
}

Un paragraphe portant la classe remarque sera rouge foncé. Dans cet exemple, le sélecteur de classe a une spécificité supérieure à celle du sélecteur de type d’élément.

L’héritage est un mécanisme distinct : certaines propriétés, comme la couleur du texte, peuvent être transmises d’un élément parent à son contenu. Ce n’est pas le cas de tous les réglages : les bordures et les marges ne sont pas héritées par défaut. Lorsqu’un style ne s’applique pas, vérifiez d’abord que le sélecteur correspond à l’élément et examinez les déclarations concurrentes, plutôt que d’ajouter immédiatement !important. Cette annotation modifie la priorité de la déclaration et peut compliquer les corrections ultérieures.

Comment CSS adapte-t-il la page à l’écran ?

La conception responsive consiste à adapter la mise en page à l’espace disponible. CSS le permet grâce à des largeurs flexibles, à des mécanismes de disposition des éléments et aux requêtes média (media queries). Ces conditions déclenchent certains styles, par exemple lorsque la zone d’affichage de la page atteint une largeur donnée.

Pour construire des mises en page, on utilise notamment Flexbox, pratique pour disposer les éléments dans une seule direction, et Grid, destiné aux dispositions en lignes et en colonnes. Une liste de produits peut ainsi comporter trois colonnes sur un écran large et une seule sur un écran étroit.

Pour définir les dimensions, il faut comprendre le modèle de boîte : un élément comporte une zone de contenu, un espacement intérieur (padding), une bordure (border) et une marge extérieure (margin). Par défaut, la largeur définie ne concerne que le contenu. Le réglage box-sizing: border-box inclut aussi les espacements intérieurs et la bordure dans cette largeur, ce qui facilite le contrôle de la taille de l’élément.

Comment débuter avec CSS ?

Les règles sont le plus souvent enregistrées dans un fichier séparé portant l’extension .css, auquel le document HTML fait référence dans sa section d’en-tête. Les styles peuvent aussi être placés directement dans le document, mais une feuille de style partagée facilite généralement la maintenance d’un site plus important.

Vous pouvez réaliser ce premier exercice sans installer d’outils supplémentaires :

Ouvrez une page dans le navigateur et choisissez l’option d’inspection de l’élément dans le menu contextuel.
Sélectionnez un paragraphe, puis modifiez sa propriété color ou font-size dans le panneau des styles.
Repérez les déclarations barrées : elles ont généralement été remplacées par d’autres règles.
Réduisez la largeur de la fenêtre et vérifiez que le texte reste lisible et qu’aucun défilement horizontal inutile n’apparaît.

Les modifications effectuées dans les outils de développement sont généralement temporaires et disparaissent lorsque vous actualisez la page. Si le résultat vous convient, reportez la règle dans le fichier du projet. Pour commencer, modifiez un seul élément et vérifiez aussi le résultat en agrandissant le texte : vous comprendrez les interactions plus vite qu’en collant une grande feuille de style toute faite.

Voir aussi : Que signifie www ?