Structure et mise en forme du CSS

Le navigateur comprendra une règle CSS même écrite sur une seule ligne compacte, mais un humain, non - c'est pourquoi la façon d'écrire le code est presque aussi importante que ce qu'il fait.

Imagine un papyrus sur lequel un scribe écrivait tantôt en signes minuscules, tantôt en signes énormes, sans aucun espace entre les lignes. Le contenu est le même, mais la lecture devient une torture. On reconnaît un bon développeur non seulement à ses compétences, mais aussi à la lisibilité de son code.

Une même règle, deux écritures

Regarde deux versions de la même règle. La première ressemble à du code « minifié », c'est-à-dire débarrassé des espaces inutiles pour que le fichier soit plus léger :

1h1{color:red;background-color:gold}

Elle fonctionne, mais il est difficile d'y trouver rapidement une déclaration précise, surtout quand il y en a dix et non deux. Et voici exactement la même règle, mise en forme selon les principes que nous suivons tout au long du cours :

1h1 {
2  color: red;
3  background-color: gold;
4}

Le navigateur traitera les deux écritures de manière identique - les espaces, l'indentation et les retours à la ligne entre les parties d'une règle ne changent rien à son fonctionnement. La seule chose qui change, c'est la vitesse à laquelle un humain la lit, par exemple toi, dans un mois.

Les principes d'une règle lisible

Qu'est-ce que cela signifie, pour un code, d'être lisible ? Pour l'instant, il suffit de surveiller ton indentation en HTML et en CSS. Chaque règle CSS doit être construite de la même manière :

1h1 {
2  color: red;
3}
4p {
5  color: blue;
6}

Comment créer une règle CSS :

1. Le sélecteur toujours en début de ligne, un espace, puis l'accolade ouvrante.
2. Une indentation identique pour chaque déclaration. Il est important que la ligne de déclaration ressemble à ceci - propriété: valeur;. N'oublie pas l'espace après les deux-points et le point-virgule à la fin.
3. L'accolade fermante.

L'indentation fait généralement deux espaces, comme dans nos exemples, ou quatre - choisis l'une des deux options et tiens-t'y dans tout le fichier.

La couleur du texte et du fond

Puisqu'une règle peut contenir plusieurs déclarations, découvrons deux propriétés qui te serviront tout de suite. La couleur du texte se règle avec color, et la couleur de fond avec background-color :

1p {
2  color: #1E90FF;
3  background-color: #FFD700;
4}

Le texte du paragraphe sera bleu comme le Nil, et le fond doré. Tu peux indiquer les couleurs par leur nom (red, gold) ou par un code hexadécimal qui commence par un dièse, par exemple #FFD700 - c'est exactement le même doré que gold, simplement écrit en chiffres. Il existe aussi les notations rgb() et hsl(), qui décrivent une couleur par les valeurs de ses composantes. Dans rgb(205, 133, 63), les trois nombres de 0 à 255 indiquent la quantité de rouge, de vert et de bleu ; le code #CD853F écrit les mêmes nombres en hexadécimal, deux caractères chacun (CD vaut 205).

Le fond peut aussi se définir avec la propriété plus courte background. C'est ce qu'on appelle un raccourci (en anglais shorthand) : en plus de la couleur, tu peux notamment y indiquer une image de fond. Pour commencer, je te recommande background-color - on voit tout de suite que tu ne modifies que la couleur.

Trois autres choses te seront utiles dans le prochain exercice. padding est l'espacement à l'intérieur d'un élément, et margin l'espacement à l'extérieur. Tu les écris comme n'importe quelle autre déclaration, et nous les verrons en détail dans la leçon sur le modèle de boîte (box model). Un sélecteur peut aussi désigner une classe : .gold, avec un point au début, n'atteindra que les éléments qui ont l'attribut class="gold", que tu connais depuis le premier module.

Une dernière chose te servira : le texte entre /* et */ est un commentaire, que le navigateur ignore. « Décommenter » une règle, c'est supprimer ces caractères autour d'elle pour que le navigateur la lise de nouveau.

Mettre en forme plusieurs éléments

Dans l'exemple des principes d'une règle lisible, le titre a reçu la couleur rouge et le paragraphe la couleur bleue - chacun dans sa propre règle. Mais que faire si la même couleur doit s'appliquer à de nombreux éléments à la fois ?

La réponse est simple - tu peux énumérer les sélecteurs les uns après les autres en les séparant par des virgules :

1h1, p {
2  color: blue;
3}

La couleur bleue s'appliquera aux éléments h1 et p. Les autres éléments, par exemple h2, garderont leur couleur actuelle, car la règle n'atteint que les sélecteurs de la liste. Attention à la virgule : l'écriture h1 p, avec un espace à la place de la virgule, sélectionne les paragraphes placés à l'intérieur de h1 - tu découvriras ce type de sélecteurs dans la leçon sur les sélecteurs avancés. Pour une liste plus longue, je te conseille d'écrire chaque sélecteur sur une ligne séparée, suivi d'une virgule.

Pratique

Dans l'éditeur ci-dessous, le regroupement fonctionne en pratique : h1 et h2 partagent une couleur et une police, tandis que div et span partagent un fond et des espacements. Remarque que div et span ont ensuite, en plus, leurs propres règles séparées :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - Mise en forme et regroupement</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Titre principal</h1>
11    <p>Voici un paragraphe qui sera mis en forme.</p>
12    <h2>Deuxième titre</h2>
13    <p>Un autre paragraphe avec du texte.</p>
14    <div>Voici un div - un élément conteneur</div>
15    <span>Voici un span - un élément en ligne</span>
16</body>
17</html>

Le groupe fixe une base commune, et les règles séparées ajoutent les différences. On reconnaît un bon scribe à la régularité de ses lignes, alors construis chaque règle toujours de la même façon - le sélecteur, des déclarations indentées au format propriété: valeur terminées par un point-virgule, l'accolade fermante - et quand plusieurs éléments doivent partager la même apparence, sépare leurs sélecteurs par des virgules au lieu de recopier le code.