Django - 3.2 CSS : premiers styles et couleurs de titres

Le CSS donne du style aux éléments HTML, par exemple la couleur d'un titre. Cette leçon compare deux façons d'appliquer un style : directement dans la balise, puis avec un bloc de style. Elle montre aussi comment cibler un seul titre grâce à un identifiant.

Le style directement dans la balise

L'attribut style se place dans la balise elle-même. Dans l'exemple, un titre devient bleu grâce à la propriété de couleur. Le problème apparaît quand il faut appliquer le même style à un autre titre : il faut alors copier-coller le code, ce qui est peu évolutif.

<h1 style="color: blue;">Premier titre</h1>

Un bloc de style dans la tête de la page

Pour éviter les copier-coller, le style est défini une seule fois dans la tête de la page, avec la balise style. Le sélecteur h1 applique la couleur à tous les titres h1 de la page.

<head>
  <style>
    h1 {
      color: purple;
    }
  </style>
</head>

Cibler un seul élément avec un identifiant

Pour changer la couleur d'un seul titre, on lui donne un identifiant avec l'attribut id. Dans le bloc de style, cet identifiant se désigne avec le signe dièse. Les autres titres gardent alors leur couleur.

<h1 id="<nom-de-l-id>">Premier titre</h1>

#<nom-de-l-id> {
  color: blue;
}

En résumé

L'attribut style colore un élément directement. Un bloc style dans la tête de la page applique un style à tous les éléments d'un même type. Un identifiant permet de cibler un seul élément, avec le signe dièse dans le CSS.

Points clés

• L'attribut style agit sur une seule balise.
• Un bloc style dans la tête s'applique à plusieurs éléments.
• Le sélecteur h1 cible tous les titres h1.
• L'attribut id identifie un élément de manière unique.
• Le sélecteur d'identifiant commence par le signe dièse.

Questions fréquentes

Pourquoi éviter le style répété dans chaque balise ?

Il faut répéter le code pour chaque élément, ce qui devient difficile à faire évoluer. Un bloc de style est plus simple à modifier.

Comment choisir une couleur ?

La leçon montre un sélecteur de couleurs qui permet de choisir la couleur visuellement. Vous êtes libre de choisir celle qui vous plaît.

Comment cibler un titre précis ?

Ajoutez-lui un identifiant avec l'attribut id, puis utilisez ce même nom précédé du signe dièse dans le CSS.