Syntaxe CSS

1. À quoi sert le CSS

Le CSS est un langage descriptif, comme le HTML. On n’y écrit pas d’instructions à exécuter les unes après les autres : on décrit un résultat, et le navigateur se charge de l’obtenir.

Ce qu’il décrit, c’est la présentation d’une page HTML. En bref, le CSS est responsable :

• de la couleur du texte ;
• des images de fond ;
• de la taille et de la police des caractères ;
• de savoir si le menu est à gauche ou à droite ;
• et de tout ce qui touche à l’apparence.

Surtout, le CSS est indépendant de la page HTML. Le HTML dit ce qu’est le contenu, un titre, un paragraphe, un lien. Le CSS dit à quoi il ressemble. On peut changer toute l’apparence d’un site sans toucher à une seule balise.

2. L’attribut style

Le CSS indique le style à appliquer sur chaque balise HTML. La façon la plus directe de le faire, c’est l’attribut style, écrit sur la balise elle-même.

<h1 style="color: white; background: hotpink;">
    Hello World
</h1>

Ce titre s’affichera en blanc sur fond rose. L’attribut contient deux déclarations, chacune formée d’une propriété, de deux-points, puis d’une valeur. Un point-virgule termine chaque déclaration.

propriété: valeur;

C’est pratique pour un essai rapide, mais on s’en sert peu. Le style se retrouve mélangé au contenu, et il faudrait le recopier sur chaque titre de chaque page.

3. Les sélecteurs

La plupart du temps, on déclare les styles à part, à l’aide d’un sélecteur. Le sélecteur désigne les balises concernées, et les déclarations s’écrivent entre accolades.

h1 {
    color: white;
    background: hotpink;
}

Cette règle s’applique à tous les h1 de la page, d’un coup. Changer la couleur de tous les titres ne demande plus qu’une modification.

Le vocabulaire, à retenir pour se comprendre :

• h1 est le sélecteur ;
• color et background sont des propriétés ;
• white et hotpink sont des valeurs ;
• color: white; est une déclaration ;
• l’ensemble, sélecteur et accolades compris, est une règle.

Ici le sélecteur est un nom de balise, mais il en existe bien d’autres. Trois suffisent pour commencer.

3.1 Le sélecteur de balise

Le nom d’une balise cible toutes les balises de ce nom, où qu’elles soient dans la page.

p {
    color: crimson;
}

3.2 Le sélecteur de classe

L’attribut class donne un nom à une balise, choisi librement. En CSS, ce nom s’écrit précédé d’un point.

<p class="important">Fermer le gaz.</p>

.important {
    font-weight: bold;
}

Le sélecteur .important cible toutes les balises qui portent cette classe, quel que soit leur nom : un p, un li, un h2. Une balise peut aussi porter plusieurs classes, séparées par une espace : class="prix promo" porte la classe prix et la classe promo.

3.3 Le sélecteur d’arborescence

C’est là que le vocabulaire de famille vu en HTML va servir. Deux sélecteurs séparés par une espace ciblent les éléments du second qui sont descendants du premier.

nav a {
    color: white;
}

Cette règle cible les a qui se trouvent dans un nav, à n’importe quelle profondeur : enfants, petits-enfants, ou plus loin encore. Les liens hors du nav ne changent pas, et le nav lui-même non plus.

Un sélecteur se lit de droite à gauche. .menu a se lit « des a, qui sont dans un élément de classe menu ». Seule la dernière partie est ciblée, les autres disent où la chercher.

4. Où écrire le CSS

Une règle CSS ne s’écrit pas n’importe où dans la page. Elle a deux places possibles, toutes deux dans la balise <head>.

Directement dans une balise <style>.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <style>
        h1 { color: white; background: hotpink; }
    </style>
</head>

Dans un fichier externe, appelé par une balise <link>.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <link rel="stylesheet" href="style.css">
</head>

Le fichier style.css ne contient que du CSS, sans aucune balise. L’attribut rel indique qu’il s’agit d’une feuille de style, et href dit où aller la chercher.

C’est le fichier externe qu’on utilise presque toujours. Toutes les pages du site appellent la même feuille de style, et la modifier change l’apparence du site entier.

5. S’entraîner

Les sélecteurs ne s’apprennent qu’en s’en servant. On commence par en lire, on continue en en écrivant, toujours avec les trois sélecteurs de cette leçon.

5.1 Lire un sélecteur

Une règle CSS est donnée, à côté d’un petit bout de HTML. Il faut trouver les lignes qu’elle cible.

5.2 Écrire un sélecteur

L’exercice inverse : des lignes sont surlignées, et il faut écrire le sélecteur qui les cible toutes, et seulement elles. Souvent, plusieurs sélecteurs sont justes.

5.3 Pour aller plus loin : CSS Diner

CSS Diner est un jeu où l’on sert des plats en les désignant avec des sélecteurs. Ses premiers niveaux reprennent ceux de cette leçon, les suivants en présentent de nouveaux.