Ouvrez deux sites de boulangerie sur votre iPhone. Les deux affichent un nom, des horaires et une adresse. Pourtant, l’un est rose pâle avec une écriture ronde, l’autre noir et doré avec de grandes lettres fines. Le texte est presque le même. Ce qui change, c’est le CSS.
À quoi sert le CSS ?
CSS sont les initiales de trois mots anglais qui veulent dire « feuilles de style en cascade ». Retenez surtout le mot style : le CSS sert à donner un style à la page.
Une page web se construit en couches. Le HTML pose le texte et la structure : ici un titre, là un paragraphe, plus bas un bouton. Le CSS vient ensuite dire comment tout cela doit avoir l’air :
- les couleurs du fond, du texte, des boutons ;
- les polices de caractères et leur taille ;
- les espaces entre les éléments, les marges ;
- la mise en page : deux colonnes côte à côte, un menu en haut, un pied de page ;
- l’adaptation à l’écran : la même page bien rangée sur un grand ordinateur et sur un petit téléphone.
Ce qui bouge, comme un menu qui s’ouvre quand on le touche, relève plutôt du JavaScript. Le CSS peut faire quelques effets simples, un bouton qui change de couleur au passage du doigt par exemple, mais son vrai métier, c’est l’apparence.
Comment ça marche concrètement ?
Le CSS est rangé dans un fichier à part, souvent appelé style.css, parmi les fichiers du site. On l’appelle une feuille de style. Le HTML de chaque page contient une petite ligne qui dit au navigateur : « va chercher cette feuille de style et applique-la ».
Dans ce fichier, on écrit des règles. Chaque règle dit « tel élément aura telle apparence ». Par exemple, une règle comme h1 { color: navy; } veut dire : « tous les grands titres seront bleu marine ». Une seule ligne, et tous les titres du site changent d’un coup.
C’est tout l’intérêt d’avoir séparé le texte de l’apparence. Si votre site a cinquante pages et que vous voulez des titres verts au lieu de bleus, vous ne modifiez pas cinquante pages. Vous modifiez une ligne dans la feuille de style, et toutes les pages suivent.
Le mot « cascade » vient de là : plusieurs règles peuvent s’appliquer au même élément, et le navigateur suit un ordre de priorité pour décider laquelle gagne. Une règle générale dit « le texte est gris », une règle plus précise dit « sauf dans les boutons, où il est blanc ».
Le CSS et le téléphone
Une bonne partie des visiteurs arrive aujourd’hui depuis un téléphone. Le CSS permet d’écrire des règles qui ne s’appliquent que sur les petits écrans : passer de trois colonnes à une seule, grossir les boutons pour le doigt, cacher un élément trop encombrant. On appelle cela un site responsive, un mot anglais qui veut dire « qui s’adapte ».
C’est votre navigateur qui fait ce travail : il reçoit le HTML et le CSS envoyés par le serveur web, regarde la taille de l’écran, et applique les bonnes règles.
Les mots qu’on vous dira
- Feuille de style : le fichier qui contient les règles CSS.
- Thème : un habillage complet tout prêt, souvent proposé pour les sites faits avec WordPress. Le CSS y tient une grande place.
- Police : le dessin des lettres. Le CSS peut en charger une particulière pour donner du caractère au site.
- Vider le cache : le navigateur garde une copie du CSS pour aller plus vite. Après une modification, il faut parfois recharger la page pour voir la nouvelle apparence.
Ce que vous avez à retenir
Si vous voulez changer ce qu’on lit sur votre site, c’est le HTML. Si vous voulez changer ce qu’on voit, la couleur, la taille, la disposition, c’est le CSS.
Vous n’avez pas besoin d’écrire les règles vous-même. Avec un assistant IA installé sur votre serveur, il suffit de demander en français : « mettez les boutons en vert sapin et agrandissez le texte sur téléphone ». Il ouvre la feuille de style et ajuste les bonnes règles. Pensez simplement à regarder le résultat sur votre propre téléphone : c’est là que vos visiteurs le verront.