Présentation des CSS (cours)

Introduction

Qu’est-ce que les CSS ?

Le langage HTML a pour vocation de décrire le contenu, la sémantique (signification des éléments d’une page) et la structure d’une page web. S’il permet, de manière limitée, d’ajouter de la mise en forme, cette pratique est déconseillée car elle va à l’encontre des standards actuels. La présentation visuelle doit être confiée à CSS, un langage spécifiquement conçu pour gérer l’apparence et la mise en page.

CSS est l’acronyme de Cascading Style Sheets, que l’on traduit en français par « feuilles de style en cascade ». Ce langage est donc utilisé pour définir l’apparence d’un document HTML : il permet de préciser les couleurs, les polices, les tailles de caractères, les espacements, les bordures, mais aussi des effets plus avancés comme les animations ou les transitions. Mais son champ d’action ne s’arrête pas là : CSS rend également possible le dimensionnement et le positionnement des différents éléments de la page, qu’il s’agisse de blocs, d’images ou de sections complètes.

Le mot « cascade » fait référence à la manière dont les règles CSS sont appliquées lorsqu’elles entrent en concurrence. Certaines propriétés sont héritées automatiquement des éléments parents, tandis que d’autres doivent être définies explicitement. Le navigateur applique alors un ordre de priorité entre les différentes sources de styles, ce qui constitue l’un des principes fondamentaux de CSS. Nous reviendrons en détail sur cette notion dans la suite du cours.

Quels avantages pour le développement ?

Il est aujourd’hui inconcevable de concevoir une page web sans recourir aux feuilles de style en cascade (CSS), tant leurs avantages sont déterminants :

• Rapidité de mise en forme : les règles s’appliquent par lot à un ensemble d’éléments (par exemple tous les titres <h1>), ce qui rend la mise en page bien plus efficace que la mise en forme directe en HTML.
• Facilité de mise à jour : une simple modification dans la feuille de style suffit pour actualiser l’apparence de tous les éléments concernés, sans devoir intervenir un par un sur le code HTML et cela quel que soit le nombre page HTML concernées.
• Possibilités graphiques : alors que les capacités de présentation offertes par HTML sont très limitées, CSS propose une large palette d’options typographiques, visuelles et de mise en page.
• Lisibilité du code : en séparant contenu et présentation, le code HTML est allégé et demeure plus clair, dépourvu de balises ou d’attributs liés à la mise en forme directe.

Les principes du langage CSS

Séparation de la forme et du contenu

Le premier principe fondamental des feuilles de style consiste à distinguer nettement deux dimensions complémentaires : d’une part, le code qui décrit le contenu d’une page web — sa structure, son texte et sa sémantique — géré par le langage HTML ; d’autre part, le code qui définit la présentation et la mise en forme — couleurs, polices, positionnement, marges — assuré par le langage CSS.

Le projet CSS Zen Garden illustre parfaitement ce principe. Le site propose aux concepteurs de travailler à partir d’une même page HTML, qu’il est interdit de modifier, et de lui appliquer des mises en page différentes exclusivement au moyen de feuilles de style. Ainsi, plusieurs réalisations visuellement très contrastées reposent toutes sur un code HTML identique, la variation provenant uniquement des règles CSS (et, le cas échéant, des images appelées par celles-ci).

Le fait de séparer la forme du contenu rend le code non seulement plus lisible, mais aussi plus facile à maintenir. Cette séparation permet d’intervenir sur l’un ou l’autre aspect d’un site web sans risque de perturber l’ensemble : le contenu et la structure peuvent être modifiés dans le code HTML, tandis que l’apparence visuelle peut évoluer indépendamment dans la feuille de style CSS.

Cette distinction reflète également la complémentarité de deux domaines de compétences différents. La rédaction de contenu et l’organisation de l’information relèvent d’un travail plutôt éditorial ou rédactionnel, qui nécessite clarté et précision dans la structuration du texte. La mise en forme et le design visuel, en revanche, mobilisent des savoir-faire graphiques : choix des couleurs, typographies, proportions, hiérarchies visuelles. En séparant HTML et CSS, on rend possible une collaboration plus efficace entre profils techniques, rédacteurs et designers, chacun pouvant se concentrer sur son champ d’expertise.

Adaptation en fonction du support de consultation

Depuis de nombreuses années, CSS offre la possibilité de distinguer la mise en forme d’une page web selon le support de consultation, qu’il s’agisse de l’affichage à l’écran ou de l’impression papier. Cette distinction permet, par exemple, de supprimer les éléments d’interface superflus lors de l’impression — tels que les menus de navigation ou les publicités — et d’adapter la mise en page en ajustant les marges, la taille des caractères ou les couleurs afin d’améliorer la lisibilité sur papier.

Depuis la version 3 de CSS sont apparues les media queries, qui permettent de reconnaître divers critères liés à l’écran — sa taille (par exemple 2560×1440 ou 1920×1080), le type de dispositif (smartphone, télévision, projecteur, etc.), l’orientation (portrait vs paysage) — et d’adapter la mise en page en conséquence. Grâce à ces règles, une page web peut s’afficher différemment selon le support de consultation, selon les critères définis par le webdesigner.

Avec l’évolution des usages numériques, la proportion de trafic web provenant des appareils mobiles (téléphone) est désormais très élevée : environ 65 % du trafic mondial en 2025 provient de mobiles (sources : statcounter). En d’autres termes, il devient indispensable d’adapter l’interface aux différents supports. Il est évident qu’une page conçue pour un écran large ne peut offrir le même confort de navigation sur un smartphone, et inversement. C’est pourquoi il est impératif de prévoir son interface pour les divers modes d’accès.

Les media queries constituent ainsi l’un des outils essentiels du responsive web design, ou design adaptatif. Cette approche consiste à concevoir des interfaces capables de s’ajuster automatiquement en fonction du support de consultation. L’adaptation ne concerne pas uniquement la mise en forme visuelle, mais aussi l’expérience utilisateur dans son ensemble.

Sur un écran d’ordinateur, le contenu pourra être présenté de manière plus riche, avec des colonnes multiples, des images de grande taille ou des menus déployés. Sur un smartphone, en revanche, la priorité sera donnée à la lisibilité et à la simplicité de navigation : le texte s’affiche sur une seule colonne, les images sont redimensionnées, les menus deviennent déroulants. L’objectif est d’assurer, quel que soit le support, un confort de lecture et une ergonomie optimale.

L’animation ci-dessous illustre ce principe en montrant comment la disposition d’un site web varie automatiquement en fonction de la largeur de l’écran.

Héritage des styles

Comme nous l’avons évoqué lors de la définition du sigle CSS, le terme cascading renvoie à la notion d’héritage. Ce principe repose sur l’idée que certaines propriétés de mise en forme appliquées à un élément HTML (comme un p ou un h1) sont automatiquement transmises à ses éléments enfants, sauf si des règles spécifiques viennent les redéfinir.

Il serait prématuré d’entrer ici dans les détails techniques de ce mécanisme. Nous mettrons donc momentanément de côté ce concept pour y revenir ultérieurement, après avoir étudié la syntaxe du langage CSS et le rôle des sélecteurs, qui permettront de mieux comprendre le fonctionnement de l’héritage.

La syntaxe de CSS

La syntaxe globale du langage CSS est relativement simple. Une règle CSS se présente toujours de la même manière :

selecteur {    propriete1: valeur;    propriete2: valeur;}

Une règle CSS se compose donc d’un sélecteur, suivi d’accolades. À l’intérieur de ces accolades figurent une ou plusieurs déclarations de style, chacune constituée d’une propriété et de la valeur qui lui est associée.

Le sélecteur

Le sélecteur est un élément clé puisqu’il indique sur quels éléments HTML vont s’appliquer les propriétés CSS qui vont suivre. Il sera systématiquement suivi d’accolades qui encadreront les propriétés en question. C’est probablement un des aspects les plus compliqués lorsque l’on débute avec CSS, puisqu’il va y avoir, comme nous allons le voir un peu plus tard, quelques règles à connaître…

Les propriétés

La partie située entre les accolades d’une règle CSS correspond à l’ensemble des paramètres de mise en forme que l’on souhaite appliquer à l’élément ciblé par le sélecteur. Chaque déclaration se compose du nom d’une propriété, suivi de deux points, puis de la valeur attribuée à cette propriété. La déclaration se termine par un point-virgule.

Il est important de souligner qu’il n’est généralement pas possible d’inventer les propriétés ou leurs valeurs : elles sont définies par la spécification CSS. Il est donc nécessaire de consulter régulièrement un site de référence, tel que la documentation de MDN ou le W3C, ou bien vos propres notes, afin de vérifier le nom exact des propriétés et les valeurs autorisées.

Exemple

Prenons un exemple concret. Dans la règle ci-dessous, le sélecteur est h1. Cela signifie que toutes les propriétés inscrites entre les accolades s’appliqueront à l’ensemble des éléments <h1> présents dans le code HTML de la page.

h1 {    color: red;    font-style: italic;}

La propriété color définit la couleur du texte, ici le rouge, tandis que la propriété font-style permet d’en préciser le style, en l’occurrence l’italique. En conséquence, tous les titres de niveau 1 de la page seront affichés en rouge et en italique.

Attention à la syntaxe

Pour limiter les erreurs, il est essentiel d’adopter une écriture rigoureuse du CSS. Chaque règle doit être soigneusement structurée : on place le sélecteur, puis on ouvre les accolades, et l’on écrit ensuite les propriétés à l’intérieur. Celles-ci doivent être indentées, c’est-à-dire décalées vers la droite par rapport au sélecteur. L’indentation permet de rendre le code visuellement plus clair, en facilitant la lecture et la détection des éventuelles erreurs.

La méthode la plus simple consiste à utiliser la touche de tabulation, qui ajoute automatiquement un décalage uniforme. Cette pratique est plus fiable que d’insérer manuellement quelques espaces, car elle garantit une indentation régulière et cohérente sur tout le fichier. La plupart des éditeurs de code permettent d’ailleurs de configurer cette indentation (tabulation réelle ou équivalente en espaces), mais ce qui importe avant tout est de conserver la même convention dans l’ensemble du document.

Enfin, il est recommandé de placer une seule propriété par ligne. Ces règles de présentation réduisent considérablement les risques d’erreurs et améliorent la lisibilité du code, tant pour vous-même que pour d’éventuels collaborateurs.

Au début, il est également recommandé de commenter votre code pour en faciliter la relecture. Les commentaires s’écrivent entre /* et */.

/* Section : titres */h1 {  color: #c00;  font-style: italic;  margin-bottom: 0.5em;}​/* A finir : gérer l'espacement sur mobile */

Voici quelques pièges fréquents à éviter :

• Oublier le point-virgule en fin de déclaration.
• Oublier l’accolade fermante.
• Confondre la syntaxe (color = red au lieu de color: red;).
• Mal orthographier une propriété ou une valeur (font-weigth au lieu de font-weight).
• Omettre les unités lorsque c’est nécessaire (margin: 10 au lieu de margin: 10px).

Comment associer des styles à une page web ?

Avant de pouvoir appliquer des propriétés CSS à des sélecteurs, il est nécessaire de comprendre comment relier le code CSS au document HTML. La question est donc de savoir où placer ce code CSS et de quelle manière l’associer à une page web.

Les styles par défaut du navigateur

Si vous avez déjà créé une page web, vous avez en réalité utilisé des CSS sans forcément en avoir conscience. En effet, tous les navigateurs intègrent une feuille de style par défaut, également appelée user agent stylesheet. C’est elle qui applique automatiquement un minimum de mise en forme afin de rendre la page lisible, même en l’absence de styles définis par le concepteur.

C’est ainsi que, sans intervention particulière, vous observez déjà certaines différences d’affichage : les titres apparaissent en gras et de taille plus importante, les paragraphes sont séparés par des marges, les listes affichent des puces ou des numéros, etc. Ces règles par défaut peuvent varier très légèrement d’un navigateur à l’autre, mais elles reposent toutes sur ce même principe.

Création d’une feuille de style interne

La méthode la plus simple pour ajouter des styles à une page web consiste à utiliser ce que l’on appelle une feuille de style interne. Cette approche consiste à placer directement le code CSS dans la section <head> du document HTML, à l’intérieur de la balise <style>.

Dans l’exemple ci-dessous, la feuille de style interne précise que tous les titres <h1> doivent s’afficher en rouge et les paragraphes <p> doivent apparaître en bleu. Si l’on souhaite par exemple modifier la couleur de l’ensemble des paragraphes, il suffit de changer la valeur de la propriété color associée au sélecteur p (ligne 9).

<!DOCTYPE html><html>  <head>     <style type="text/css">        h1 {         color: red;       }       p {         color: blue;       }     </style>  </head>  <body>    <h1>Lorem ipsum</h1>    <p>Dolor sit amet, consectetur adipiscing elit. </p>    <p>Mauris quis sapien fermentum felis malesuada pharetra. </p>  </body></html>​

Si la feuille de style interne présente l’avantage d’être simple à mettre en œuvre, elle comporte un inconvénient majeur. Dans le cas d’un site composé de plusieurs pages, il faudrait recopier le même bloc CSS dans chacune d’elles afin de conserver une cohérence graphique : mêmes couleurs, mêmes polices, mêmes marges et mêmes règles de mise en page.

Or, dès qu’une modification est nécessaire — par exemple changer une couleur ou ajuster une police — il faudrait répéter la correction dans toutes les pages, ce qui augmente le risque d’oublis ou d’incohérences visuelles entre les différentes parties du site. Pour un site très réduit, comprenant deux ou trois pages, cette contrainte reste encore gérable. Mais dès que le nombre de pages augmente, la maintenance devient rapidement lourde et source d’erreurs.

C’est pourquoi, dès que l’on conçoit un site dépassant une page unique, il est préférable d’adopter une méthode plus efficace : utiliser une feuille de style externe…

Création d’une feuille de style externe

Le principe d’une feuille de style externe consiste à regrouper l’ensemble des règles CSS dans un fichier dédié, avec l’extension .css. Chacune des pages HTML contient une instruction lui demandant d’utiliser le fichier CSS. De cette manière, une modification effectuée dans le fichier CSS est automatiquement répercutée sur toutes les pages qui y font référence, ce qui garantit une cohérence graphique et facilite grandement la maintenance du site.

Les fichiers CSS se créent et s’éditent avec les mêmes outils que les fichiers HTML, tels qu’un simple éditeur de texte ou un environnement de développement spécialisé. La seule différence formelle réside dans leur extension : alors que les fichiers HTML portent généralement l’extension .html ou .htm, les feuilles de style sont enregistrées avec l’extension .css.

Il est possible d’intégrer du code CSS dans un document HTML (par le biais d’une feuille interne ou de styles en ligne), mais l’inverse n’est pas vrai : un fichier CSS ne peut contenir que des règles de style et n’hébergera jamais de code HTML. Cette séparation stricte reflète la distinction entre contenu (HTML) et présentation (CSS).

Une fois le fichier .css créé, il est nécessaire de le relier à toutes les pages HTML qui doivent l’utiliser. Pour cela, on insère dans la section <head> de chaque page une balise <link>. Cette balise est toujours structurée de la même manière, mais l’attribut href doit être adapté en fonction du nom du fichier de style et de son emplacement dans l’arborescence du site.

<!DOCTYPE html><html>  <head>     <link rel="stylesheet" type="text/css" href="styles.css">  </head>  <body>    <h1>Lorem ipsum</h1>    <p>Dolor sit amet, consectetur adipiscing elit. </p>    <p>Mauris quis sapien fermentum felis malesuada pharetra. </p>  </body></html>

Dans cet exemple, le fichier s’appelle style.css et se trouve dans le même dossier que la page HTML. Si le fichier est placé dans un sous-dossier, il faudra adapter le chemin dans l’attribut href (par exemple css/style.css).

Utilisation de style « en ligne »

Il est également possible d’intégrer directement du code CSS à l’intérieur des balises HTML : on parle alors de style en ligne (inline style). Cette méthode doit cependant rester exceptionnelle, car elle revient à mélanger contenu et présentation, ce qui est contraire à la philosophie des feuilles de style. En procédant ainsi, on perd la souplesse et la cohérence offertes par une feuille CSS externe, et l’on se rapproche des pratiques de mise en forme directe, aujourd’hui considérées comme obsolètes.

L’utilisation d’un style en ligne se fait grâce à l’attribut style, qui peut être appliqué à n’importe quelle balise HTML. L’attribut contient directement les propriétés CSS souhaitées. Dans ce cas, il n’est pas nécessaire d’indiquer de sélecteur : celui-ci est implicitement défini par la balise qui porte l’attribut.

<p style="color: blue; margin-left: 25px">     Un paragraphe qui contient du texte et un mot en <span style="color: red;">rouge</span>.</p> 

Comme nous l’avons déjà dit, l’utilisation de styles en ligne doit rester exceptionnelle, toutefois, certains contextes spécifiques justifient ce recours :

• Les newsletters et e-mails HTML : de nombreux clients de messagerie ne prennent pas en charge les feuilles de style externes. Le style inline est alors souvent la seule méthode fiable pour garantir l’affichage correct du message.
• Les plateformes d’apprentissage ou de publication (par ex. Moodle, forums, éditeurs simplifiés) : lorsque l’on ne dispose pas d’un accès direct à la feuille de style du site, on peut parfois insérer ponctuellement un style inline pour mettre en valeur un mot ou un paragraphe (changer une couleur, mettre un fond, etc.).
• Les tests rapides ou corrections ponctuelles : lors d’un essai ou d’un prototype, le style inline peut servir à appliquer une règle de manière immédiate, avant de la reporter dans une feuille de style plus structurée.

En dehors de ces cas particuliers, il est recommandé d’éviter cette pratique, car elle nuit à la séparation entre contenu et présentation et complique la maintenance du code.

3 méthodes, laquelle utiliser ?

Nous venons de voir trois méthodes différentes pour intégrer des styles dans une page web. Chacune répond à des besoins spécifiques et ont leurs inconvénients.

Vous l’aurez compris, vous devez favoriser au maximum l’utilisation d’une feuille de style externe qui permet d’exploiter pleinement tout le potentiel de CSS.

Comportements des styles déclarés

Voyons deux comportement que l’on peut observer lorsque l’on accumule plusieurs déclarations CSS.

Principe de combinaison

Lorsqu’un même sélecteur est concerné par plusieurs déclarations issues de différentes sources (styles par défaut du navigateur, feuilles externes, styles internes, etc.), les propriétés ne s’annulent pas systématiquement mais se combinent. Chaque déclaration apporte ses propres règles, et le navigateur les regroupe pour produire le style final appliqué à l’élément.

Prenons un exemple : le navigateur applique ces règles internes comme nous l’avons vu et nous ajoutons une feuille de style externe.

strong {        font-weight: bolder; /* Gras */}

strong {        color: red;}

Le navigateur combine alors les deux ensembles de propriétés pour produire le rendu final :

strong {        font-weight: bolder;    color: red;}

Ainsi, l’élément <strong> apparaîtra en rouge et en gras.

Ce mécanisme illustre l’importance de la cascade : tant que les règles ne se contredisent pas, elles s’additionnent. En cas de contradiction, c’est l’ordre de priorité (spécificité et position dans le code) qui détermine la règle gagnante.

Principe de surcharge

Nous avons vu que les propriétés déclarées à différents endroits pour un même élément peuvent se combiner si elles concernent des aspects distincts. Mais que se passe-t-il lorsqu’une même propriété CSS reçoit plusieurs valeurs différentes ?

strong {        font-weight: bolder; }

strong {    font-weight: normal;}

Ici, la propriété font-weight apparaît dans les deux déclarations avec des valeurs différentes : bolder (le plus gras) dans la feuille du navigateur et normal dans la feuille externe.

Dans ce cas, le principe de surcharge s’applique : la déclaration jugée prioritaire (selon la cascade, la spécificité et l’ordre d’apparition) remplace la précédente. Le résultat final équivaut donc à :

strong {    font-weight: normal;}

Autrement dit, la valeur de font-weight définie dans la feuille externe vient surcharger celle fournie par le navigateur, tandis que les autres propriétés non redéfinies continuent d’être héritées.

Les sélecteurs

Comme nous l’avons déjà évoqué, le sélecteur est l’élément d’une règle CSS qui permet d’indiquer à quels éléments HTML seront appliquées les propriétés définies dans la déclaration. Afin d’exploiter pleinement la puissance du langage, il est nécessaire de comprendre qu’il existe différents types de sélecteurs, chacun répondant à un usage précis.

Le sélecteur d’élément

Le sélecteur d’élément est le plus simple et le plus générique des sélecteurs CSS. Il s’applique à tous les éléments HTML portant un même nom de balise, sans distinction particulière. C’est ce type de sélecteur que nous avons utilisé dans nos premiers exemples : il suffit d’indiquer directement le nom de l’élément ciblé, comme p, h1 ou strong.

Ce sélecteur est généralement employé pour définir la mise en forme de base d’une page, autrement dit les styles par défaut associés aux principaux éléments HTML.

Le code CSS suivant utilise deux sélecteurs de type élément : h1 et p. Comme vous pouvez le voir plus bas dans l’aperçu, tous les éléments <h1> sont en bleu et tous les éléments <p> sont en rouge.

h1 {    color: blue ;}p {    color: red ;}

<h1>Logique syllogistique</h1><p>Tous les hommes sont mortels</p><p>Or <strong>Socrate</strong> est un homme</p><p>Donc <strong>Socrate</strong> est mortel.</p>​

Ce type de sélecteur est donc relativement simple à utiliser, mais il présente une limite importante : il s’applique indistinctement à tous les éléments d’un même type. Autrement dit, si l’on déclare une règle pour <p>, elle concernera l’ensemble des paragraphes de la page, sans possibilité d’en cibler un seul en particulier. Pour distinguer un paragraphe parmi d’autres, ou plus largement pour appliquer des styles spécifiques à certains éléments seulement, il est nécessaire de recourir à d’autres types de sélecteurs, que nous allons maintenant aborder.

Les classes

Les sélecteurs de classe offrent une grande souplesse, car ils permettent de cibler précisément les éléments auxquels on souhaite appliquer une mise en forme particulière. Pour les utiliser, il faut associer une classe à un ou plusieurs éléments HTML au moyen de l’attribut class. Il est possible d’attribuer une classe à n’importe quelle balise HTML, et un même élément peut même recevoir plusieurs classes si nécessaire.

<h1 class="titre-article">Principes des classes</h1><p class="introduction">Les sélecteurs de type classes vont offrir un liberté totale de mise en forme</p>

Dans l’exemple suivant, l’objectif est de mettre en rouge uniquement les noms d’animaux, qui se trouvent insérés dans des balises <em>. Si nous utilisions un sélecteur d’élément, toutes les balises <em> de la page seraient affectées, y compris celles qui ne contiennent pas un nom d’animal.

Pour cibler uniquement les cas souhaités, il est donc nécessaire de créer une classe. Le nom de la classe est libre, mais doit respecter les mêmes conventions que pour les noms de fichiers : pas de caractères spéciaux, pas d’accents, pas d’espaces et éviter les majuscules.

Dans cet exemple, la classe choisie est animal. Elle est ensuite associée uniquement aux deux balises <em> correspondant à des noms d’animaux, grâce à l’attribut class.

.animal {    color: red;}

<h1p>Logique <em>syllogistique</em></h1><p>Tous les <em class="animal">mulots</em> sont poilus</p><p>Or tous les poilus sont <em>iconoclastes</em></p><p>Donc tous les <em class="animal">mulots</em> sont <em>iconoclastes</em>.</p>

Ainsi, seuls les deux mulots apparaîtront en rouge, tandis que les autres <em> conserveront leur style par défaut.

Vous avez peut-être remarqué que, dans le code CSS, le nom d’une classe doit toujours être précédé d’un point (.). Ce signe est obligatoire : il indique au navigateur que le sélecteur fait référence à une classe.

Si vous oubliez ce point et écrivez simplement animal, le navigateur interprétera cela comme le nom d’un élément HTML <animal>. Or, un tel élément n’existe pas dans le langage HTML : la règle ne s’appliquerait donc à rien et resterait sans effet.

<h1 class="titre">Lorem Ipsum</h1><p class="introduction">Suspendisse ipsum ex, dapibus vel finibus pretium.</p><p class="texte">Nullam faucibus ultrices congue. </p><h1 class="titre">Vivamus orci neque</h1><p class="texte">Praesent ultrices ac magna et dignissim.</p><p class="texte">Donec sed hendrerit nisi. In sagittis semper felis.</p>

Les identifiants

Un identifiant (id) permet de distinguer un élément HTML de manière unique dans une page. Son principe est simple : il s’agit de donner un nom précis à un élément pour pouvoir y faire référence. Par définition, un même identifiant ne peut être attribué à deux éléments différents dans une seule et même page. Les règles de nommage sont identiques à celles des classes : pas de caractères spéciaux ni accentués, pas d’espaces et éviter les majuscules.

Aujourd’hui, les identifiants sont principalement utilisés dans deux contextes :

• pour effectuer des manipulations via JavaScript, souvent associé à HTML et CSS,
• pour créer des ancres nommées, c’est-à-dire des points de repère permettant de faire défiler la page jusqu’à un endroit précis.

Il reste possible d’utiliser les identifiants pour la mise en forme en CSS, mais cela est rarement recommandé. En effet, les identifiants n’apportent pas d’avantage particulier par rapport aux classes, tout en réduisant la souplesse du code (puisqu’ils ne peuvent être appliqués qu’une seule fois). Néanmoins, comme vous rencontrerez fréquemment cette pratique dans des exemples de code, il est important de connaître leur fonctionnement.

L’identification d’un élément HTML s’effectue grâce à l’attribut id, que l’on ajoute à la balise souhaitée. En CSS, le sélecteur correspondant est écrit en faisant précéder le nom de l’identifiant du caractère #.

#exemple {    color: red ;}

<div id="exemple">Lorem ipsum</div>

Les pseudo-classes

Les pseudo-classes permettent d’appliquer des styles en fonction d’états spécifiques d’un élément, c’est-à-dire des situations temporaires ou contextuelles qui ne peuvent pas être définies uniquement par la structure HTML. Ces états dépendent par exemple de l’interaction de l’utilisateur (survol, clic, saisie), ou du contexte du document (premier élément d’une liste, élément sélectionné, etc.).

Concrètement, une pseudo-classe s’ajoute à un sélecteur classique en étant précédée de deux-points (:). Elle indique donc non pas un type d’élément, mais un état dans lequel se trouve cet élément.

Un des exemples les plus fréquents concerne les liens hypertextes. Ceux-ci peuvent se trouver dans différents états :

• :active → lien sur lequel l’utilisateur est en train de cliquer.
• :link → lien par défaut, jamais visité,
• :visited → lien déjà visité par l’utilisateur,
• :hover → lien en cours de survol par la souris,

CSS

Copier

/* Couleur des liens hypertextes par défaut */a {   color: red ;}/* Couleur des liens hypertextes au survol de la souris */a:hover {   color: green ;}/* Couleur des liens hypertextes pendant la durée du clique de l'utilisateur */a:active {   color: pink ;}/* Couleur des liens hypertextes visités, donc après un clique de l'utilisateur */a:visited {   color: aqua ;}

Voici le résultat du code :

Ordre de priorité des sélecteurs

Nous avons déjà vu qu’en cas de contradiction entre deux déclarations visant le même élément, c’est la dernière déclaration dans le code qui s’applique. Cependant, une règle complémentaire entre en jeu : la spécificité des sélecteurs.

Lorsqu’un élément est ciblé par plusieurs sélecteurs différents, c’est la règle associée au sélecteur le plus précis qui a priorité. Si les sélecteurs ont un niveau de précision identique, on retombe sur la règle précédente : la dernière déclaration l’emporte.

La hiérarchie de précision peut se résumer ainsi :

1. Les sélecteurs de type élément (par ex. p, h1), les plus génériques.
2. Les sélecteurs de classe (par ex. .foo).
3. Les sélecteurs d’identifiant (par ex. #bar), réservés aux éléments uniques.

Voici donc un exemple de trois déclarations de précisions différentes qui s’appliquent au même élément.

p {    background-color: red;}#bar {    background-color: gold;}.foo {    background-color: green;}

<p class="foo" id="bar">Lorem ipsum</p>

Dans cet exemple, l’élément <p> est concerné par trois déclarations contradictoires. La règle la plus précise est celle de l’identifiant #bar, c’est donc la couleur or (gold) qui s’applique.

Pour aller plus loin, les spécifications CSS définissent un système de points qui permet de comparer la précision des sélecteurs :

• chaque identifiant #id compte 100 points,
• chaque classe, pseudo-classe ou attribut compte 10 points,
• chaque sélecteur d’élément ou pseudo-élément compte 1 point.

Le navigateur additionne les points pour chaque sélecteur afin de déterminer lequel est le plus précis.

Compléments sur les sélecteurs

Sélecteur par descendance

Pour éviter de multiplier les classes dans le code HTML, il est possible d’utiliser la technique du chaînage de sélecteurs, qui consiste à préciser le contexte dans lequel un élément doit être mis en forme.

Par exemple, le sélecteur p strong cible uniquement les éléments <strong> qui se trouvent à l’intérieur d’un paragraphe <p>.

De la même manière, le sélecteur body div p a désigne les liens <a> contenus dans un paragraphe <p>, lui-même dans une <div>, elle-même dans le <body>.

Il est par évidemment déconseillé d’abuser du chaînage de sélecteurs, car cela complique inutilement la lecture du code et peut pénaliser légèrement les performances du navigateur. En pratique, un chaînage limité à deux niveaux est fréquent et largement suffisant dans la plupart des cas.

Voici donc un dernier exemple complet :

ul em {    color: red;}​

<h1>Logique <em>syllogistique</em></h1><ul>   <li>Aucun prêtre n'est un <em>singe</em></li>   <li>Or les chimpanzés sont des <em>singes</em></li>   <li>Donc les chimpanzés ne sont pas prêtres.</li></ul>​

Ici, la règle ul em cible uniquement les éléments <em> situés dans une liste non ordonnée <ul>. Le premier <em> (dans le paragraphe) n’est donc pas concerné.

Dans ce contexte, on aurait également pu écrire li em. La différence ne serait perceptible qu’avec des listes numérotées <ol>, puisque ul em exclut ces dernières alors que li em les inclut. On aurait aussi pu écrire ul li em, mais cela alourdit le sélecteur sans réelle nécessité.

Il est important de noter que le chaînage ne s’applique pas uniquement aux sélecteurs de type élément : il fonctionne également avec les classes, les identifiants et les pseudo-classes.

Les sélecteurs d’initialisation

Lors de la création d’une feuille de style, il est souvent pertinent de définir des valeurs par défaut pour la page entière. Deux sélecteurs de type élément peuvent être utilisés à cet effet : body et *.

Le sélecteur body s’applique à l’élément racine du contenu d’une page web, qui est l’ancêtre de tous les autres éléments affichés. Grâce au mécanisme d’héritage, les propriétés déclarées sur body se propagent automatiquement à de nombreux descendants (comme les paragraphes ou les titres). C’est pourquoi la plupart des feuilles de style commencent par un bloc body, où l’on définit les paramètres généraux de la page : police de caractères, couleur et taille du texte, couleur d’arrière-plan, marges par défaut, etc.

body {    font-family: arial, sans-serif; /* Police de caractère */    color: black;                   /* Couleur du texte */    font-size: 15px;                /* Taille des caractères */    background-color: white;        /* Couleur d'arrière-plan de la page */    margin: 0;                      /* Marges externes de la page */}

Le sélecteur * est appelé sélecteur universel : il désigne tous les éléments HTML sans distinction. Contrairement à body, il ne fonctionne pas par héritage, mais applique directement les propriétés à chaque élément.

L’exemple suivant annule les marges de la totalité des éléments HTML (<p>, <h1>, <ul>, etc).

* {    margin: 0;}

On l’utilise souvent pour effectuer un reset CSS, c’est-à-dire une réinitialisation des marges et espacements par défaut imposés par les navigateurs. Mais cette pratique classique est aujourd’hui déconseillée, car elle supprime également des propriétés par défaut utiles (par exemple, les espacements entre titres et paragraphes). Les concepteurs privilégient désormais des systèmes de reset plus précis, comme Normalize.css, qui uniformisent les styles de base tout en conservant des comportements jugés pertinents.

Utilisation de plusieurs classes

Pour optimiser le code CSS et faciliter sa maintenance, il est très courant d’associer plusieurs classes à un même élément HTML. Cette pratique permet de séparer les styles génériques des styles spécifiques et d’éviter les répétitions inutiles.

Prenons l’exemple d’une classe .message, utilisée pour définir l’apparence générale des messages affichés à l’internaute. Cette classe regroupe les propriétés communes, telles que la bordure, les marges ou le style du texte. On lui associe ensuite des classes complémentaires comme .message-success et .message-error, qui n’ajoutent que la couleur d’arrière-plan. Ainsi, la structure reste claire : une base commune et des variantes spécifiques.

.message {    border: 3px solid black;     padding: 15px;    margin: 15px;    text-align:center;    font-weight: bold;}.message-success {    background-color: green;}.message-error {    background-color: red;}

<div class="message">    Un message neutre</div><div class="message message-success">    Un message de réussite</div><div class="message message-error">    Un message d'erreur</div>

Dans cet exemple, .message définit le style global, tandis que .message-success et .message-error ajoutent simplement la couleur d’arrière-plan. Cette approche rend le code plus modulaire, plus facile à lire et à maintenir.

Les déclarations multiples

Pour gagner du temps et éviter de répéter des règles identiques, il est possible d’associer plusieurs sélecteurs à une même déclaration CSS en les séparant par une virgule. Tous les éléments correspondants partageront alors les mêmes propriétés.

Ainsi, les deux écritures suivantes sont équivalentes :

h1 {   color: green ;}h2 {   color: green ;}p {   color: green ;}.super {   color: green ;}

h1, h2, p, .super {    color: green ; }

Retour sur le concept d’héritage

Nous l’avons déjà évoqué : le principe d’héritage suppose que certaines propriétés de mise en forme appliquées à un élément HTML (comme div, p, h1, etc.) sont automatiquement transmises à ses descendants, sauf si ces derniers définissent explicitement une autre valeur. Mais pour bien comprendre ce mécanisme, il faut préciser ce que l’on entend par ancêtre.

Lorsqu’un élément HTML en contient un autre, on parle de relation parent / enfant :

• l’élément englobant est le parent,
• l’élément inclus est l’enfant.

Par extension, tous les éléments situés plus haut dans la chaîne d’imbrication constituent les ancêtres d’un élément donné. Autrement dit, un élément hérite de certaines propriétés de son parent direct, mais aussi de ses ancêtres plus éloignés.

<body>    <div>        <p>Lorem <strong>Ipsum</strong></p>        <ul>            <li>Morbi euismod condimentum ;</li>            <li>Fusce at lacus vitae lorem.</li>        </ul>    </div></body>

À partir de ce code HTML, on peut représenter la structure des éléments sous la forme d’un arbre généalogique, basé sur les relations d’imbrication des balises.

À partir de cet arbre généalogique, nous pouvons maintenant facilement déterminer les liens de parenté entre les différents éléments. Nous pouvons donc en déduire les informations suivantes :

• L’élément <body> est le parent de l’élément <div>, il est également son ancêtre ;
• L’élément <div> est l’enfant de l’élément <body> ;
• L’élément <p> a un parent <div> et deux ancêtres <div> et <body> ;
• L’élément <ul> a deux enfants, les deux éléments <li> ;
• L’élément <p> et l’élément <ul> sont frères.

Selon la règle déjà évoquée, les éléments HTML héritent des propriétés de leurs parents.

Prenons donc l’exemple, où l’on modifie la couleur de l’élément <div>. Ces enfants vont hériter de cette couleur. Leurs enfants vont également hériter de cette couleur par cascade.

Nous modifions maintenant la couleur de l’élément <ul> qui héritait initialement de la couleur de <div>.

La couleur spécifiée est prioritaire sur la couleur héritée. Dans notre exemple <ul> est désormais en vert.

Les enfants de <ul> vont donc hériter de sa couleur, ils seront donc également en vert.

Prenons un dernier exemple avec le code CSS et le code HTML suivant.

p {    color: blue ;}

<p>Lorem ipsum dolor sit amet,<strong> consectetur adipiscing</strong> elit. Curabitur in sapien eu <strong>nulla ipsum</strong>.</p>

L’élément <p> est mis en couleur, tous ces enfants seront donc dans la même couleur. Le paragraphe ci-dessous contient des éléments <strong>. Comme vous pouvez le voir, tout le texte est en bleu alors que la couleur n’a été ajoutée que pour l’élément <p>. Les éléments <strong> sont donc en bleu par héritage.

Conclusion

Les sélecteurs permettent donc d’indiquer quels éléments doivent être mis en forme. Dans la plupart des cas, plusieurs solutions existent pour parvenir au même résultat, certaines étant plus simples ou plus efficaces que d’autres.

Nous avons présenté quelques types de sélecteurs, mais il en existe bien d’autres. La liste complète est disponible sur le site http://www.w3schools.com/cssref/css_selectors.asp. Pour les découvrir de manière ludique, vous pouvez également vous exercer avec le serious game CSS Diner, qui propose des défis progressifs consistant à sélectionner des éléments HTML à l’aide de règles CSS.

Concernant les propriétés, vous en avez déjà rencontré plusieurs exemples au fil de ce cours. Il ne serait pas pertinent d’en dresser une liste exhaustive ici, car elles sont trop nombreuses et évoluent avec le temps. Lorsque vous avez besoin d’une propriété que vous ne connaissez pas, n’essayez pas de l’inventer : utilisez un moteur de recherche ou une documentation de référence (par exemple MDN Web Docs) pour en vérifier le nom, les valeurs possibles et les exemples d’utilisation. Cette démarche est la plus efficace pour apprendre à utiliser correctement le CSS dans des situations concrètes.

Vous trouverez la liste complète sur cette page https://developer.mozilla.org/fr/docs/Web/CSS/Reference.

Sauf mention contraire*, l’article Présentation des CSS (cours) et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.