Écrire une règle CSS

Vous avez déjà une page HTML, mais son apparence reste celle par défaut du navigateur. Pour la modifier, vous allez écrire une règle CSS : elle indique à quel élément appliquer un style et quelle propriété changer. Dans cette leçon, vous apprendrez à construire une règle valide et à repérer les erreurs de syntaxe les plus courantes.

La forme d’une règle CSS

Une règle CSS comprend un sélecteur et un bloc de déclarations. Le sélecteur désigne la cible à modifier ; les accolades ouvrante et fermante délimitent les déclarations. Dans l’exemple ci-dessous, p désigne les paragraphes, tandis que color est la propriété et navy sa valeur.

p {
  color: navy;
}

La ligne color: navy; est une déclaration CSS. Elle associe une propriété à une valeur, séparées par deux-points, puis se termine par un point-virgule. Les espaces et les retours à la ligne facilitent la lecture ; ils ne remplacent toutefois ni les deux-points ni les accolades. Vous pouvez écrire plusieurs déclarations dans le même bloc, chacune sur sa propre ligne.

Écrire une règle dans votre projet

Reprenez la page simple de la leçon sur la structure HTML. Enregistrez-la sous index.html, puis créez dans le même dossier un fichier nommé styles.css. Le lien vers cette feuille de style doit se trouver dans l’élément head de la page, comme indiqué ci-dessous ; si vous l’avez déjà ajouté, conservez-le.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma page de présentation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Bienvenue sur ma page</h1>
  <p>Je découvre les règles CSS.</p>
  <a href="https://example.com">Visiter un site</a>
</body>
</html>

Dans styles.css, ajoutez deux règles. La première change la couleur des paragraphes ; la seconde rend le titre plus grand avec la propriété font-size. Vous pouvez déjà appliquer ces propriétés sans étudier ici les différentes couleurs ou unités : ces choix seront détaillés dans les leçons consacrées à la couleur et à la typographie.

/* Couleur du texte des paragraphes */
p {
  color: navy;
}

/* Taille du titre principal */
h1 {
  font-size: 2rem;
}

Le texte du paragraphe apparaît en bleu foncé et le titre principal est agrandi. Le lien garde son apparence habituelle.

Les textes compris entre /* et */ sont des commentaires CSS. Ils servent à documenter votre feuille de style et ne modifient pas le rendu de la page. Dans cet exemple, les commentaires expliquent le rôle des règles en français ; gardez-les courts et utiles, surtout lorsque le nom de la propriété ne suffit pas à comprendre votre intention.

Vérifier et corriger

Ouvrez index.html dans votre navigateur et observez les deux changements. Modifiez temporairement navy en green, enregistrez le fichier CSS et actualisez la page : la couleur du paragraphe doit changer. Cette vérification simple confirme que la règle est comprise et que la feuille de style est chargée ; le rôle de href et le diagnostic détaillé du chargement seront repris dans la leçon suivante.

Une propriété doit recevoir une valeur adaptée : si vous écrivez une valeur que le navigateur ne reconnaît pas pour cette propriété, la déclaration peut être ignorée. Par exemple, remplacez momentanément color: navy; par color: couleur; ; vous ne verrez pas le changement attendu. Revenez ensuite à une valeur valide. La prochaine leçon présentera différentes façons de cibler les éléments, afin que vous puissiez appliquer vos règles plus précisément.

À retenir

• Une règle CSS se compose d’un sélecteur et d’un bloc entre accolades.
• Une déclaration associe une propriété à une valeur, séparées par deux-points et terminées par un point-virgule.
• Les commentaires CSS, écrits entre /* et */, documentent le code sans changer l’affichage.
• Enregistrez puis actualisez la page pour vérifier le résultat ; si rien ne change, contrôlez la syntaxe et le lien vers la feuille CSS.