Les règles CSS

Tes pages ont déjà des titres et des paragraphes, mais elles se ressemblent toutes : du texte noir sur fond blanc, avec la police par défaut du navigateur. Le HTML a dit au navigateur ce qu'est le contenu - maintenant, tu dois lui dire à quoi ce contenu doit ressembler. C'est à cela que sert une règle CSS.

Nous commençons tout juste ton voyage vers la maîtrise de l'art de la mise en forme du texte sur les pages web. Tu connais déjà les éléments de base, comme les titres et les paragraphes. Dans les leçons et les modules suivants de cette formation, nous t'apprendrons à manipuler la graisse de la police, à choisir la bonne famille de polices, à modifier le style du texte, à ajuster l'espacement des lignes et des lettres, à aligner le texte et à introduire d'autres effets visuels.

Dans l'éditeur de la leçon précédente, tu as déjà vu tes premières règles CSS - tu vas maintenant découvrir leur syntaxe pas à pas. Dans la continuité de l'apprentissage du HTML, qui a commencé par le titre, nous commencerons notre aventure de mise en forme du texte par ce même élément. De nombreux exercices pratiques nous attendent, grâce auxquels tu acquerras de l'expérience et de l'assurance dans le code. Inspirons-nous des méthodes de l'Égypte ancienne, où l'on suivait le principe de l'apprentissage par la pratique.

L'élément que nous allons décorer

Tu peux voir une règle CSS comme un ordre donné aux peintres du temple : d'abord, tu leur dis ce qu'ils doivent peindre, puis comment. Commençons par un simple titre de premier niveau, écrit en HTML exactement comme dans les modules précédents :

1<h1>Texte</h1>

Le navigateur l'affiche en gros caractères gras - c'est son style par défaut. Pour le changer, nous n'avons pas besoin d'ajouter un seul caractère au HTML : tout le reste se passe dans le CSS.

La première règle

Et maintenant, colorons ce titre en rouge. Voici une règle CSS complète qui le fait :

1h1 {
2  color: red;
3}

• Ligne 1 - le sélecteur h1 et l'accolade ouvrante : nous définissons à quel élément la règle doit s'appliquer,
• Ligne 2 - la déclaration CSS : la propriété (color) et la valeur (red), séparées par un deux-points et terminées par un point-virgule - elle précise à quoi ressemblera le titre,
• Ligne 3 - l'accolade fermante, c'est-à-dire la fin de la règle.

Remarque ce qui n'a pas changé : la règle ne modifie que la couleur du texte. La taille, la graisse et les espacements du titre restent ceux que le navigateur lui a donnés, car le CSS ne remplace que ce que tu écris explicitement.

Le sélecteur : à qui donnons-nous l'ordre ?

Tu commences l'écriture de chaque règle par le choix du sélecteur, car avant de dire « comment », tu dois dire « à qui ». Le sélecteur h1 choisit les éléments d'après le nom de leur balise. Bientôt, tu découvriras deux autres types de sélecteurs : le sélecteur de classe, qui s'écrit avec un point (par exemple .cadre), et le sélecteur d'identifiant, qui s'écrit avec un dièse (par exemple #logo). Nous y reviendrons dans la leçon sur les classes et les identifiants.

Une règle, plusieurs éléments

En écrivant la règle CSS ci-dessus, tu fais en sorte que tous les titres de premier niveau de la page soient rouges (si aucune autre règle ne la remplace). Peu importe que la page contienne un seul h1 ou dix - la règle les atteindra tous.

Que veut dire « remplace » ? Quand deux règles définissent la même propriété pour le même élément, le navigateur doit choisir un gagnant. À force égale des sélecteurs, c'est la règle écrite en dernier qui l'emporte :

1h1 {
2  color: red;
3}
4
5h1 {
6  color: green;
7}

Le titre sera vert, car la seconde règle se trouve plus bas dans la feuille de style. La première ne disparaît pas et ne provoque pas d'erreur - elle perd, tout simplement. Tu découvriras les règles précises de cette rivalité, c'est-à-dire la cascade et la spécificité, plus loin dans ce module.

Mon conseil : une déclaration par ligne, et toujours un point-virgule à la fin, même après la dernière. Le navigateur pardonne l'absence de point-virgule après la dernière déclaration, mais si tu ajoutes une nouvelle ligne en dessous, ce point-virgule oublié lui fera rejeter les deux.

Pratique

L'éditeur ci-dessous contient déjà trois règles : pour h1, p et h2. Change la valeur de color dans chacune d'elles - par exemple en gold, comme l'or des pharaons - et observe l'aperçu :

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 - Première règle</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Bienvenue dans le monde du CSS !</h1>
11    <p>Voici mon premier texte mis en forme.</p>
12    <h2>Un autre titre</h2>
13    <p>On peut mettre en forme différents éléments avec le CSS.</p>
14</body>
15</html>

Remarque que tu ne changes pas une seule lettre dans le fichier HTML - toute l'apparence se trouve dans le fichier style.css. Retiens : une règle CSS est un ordre donné aux peintres du temple - le sélecteur dit quel mur peindre, et la déclaration, avec quelle couleur.