Cours 2.3. CSS dans l'en-tête de la page

Syntaxe

Lorsque l'on rassemble tous les styles au même endroit, la notion locale est nécessairement perdue. Il devient impossible, avec la syntaxe en ligne, d'associer un style à un type de balise. Il est nécessaire d'utiliser des sélecteurs qui définissent quelles entités seront concernées par le style. Voici la syntaxe générale de l'utilisation des sélecteurs :

Dans cette illustration, les titres de niveau 1 et leurs descendants seront bleus en italique. Il existe un grand nombre de sélecteurs permettant de sélectionner les entités de la page avec différents critères.

Les déclarations CSS doivent se faire dans une balise <style> placée dans l'en-tête de la page.

Exemple

Voici un exemple de styles internes à une page, placés dans l'en-tête :

<html>

  <head>
    <style>
      body { background-color: #9f9f9f;}
      h1 { color: indigo; }
      p {margin-left: 40px;}
    </style>
  </head>

  <body>
    <h1>Titre</h1>
    <p>Paragraphe.</p>
  </body>

</html>

Le code précédent affiche le rendu suivant dans le navigateur :

Tester l'exemple en ligne

Dans l'exemple ci-dessus, on constate l'utilisation du sélecteur body qui permet de définir les propriétés du corps de la page, en l'occurence la couleur du fond de la page.

Le style déclaré dans l'en-tête sera appliqué à l'ensemble de la page. Lorsque l'on souhaite appliquer les mêmes styles à toutes les pages d'un site, il convient de créer un fichier CSS dédié.

Exercice

Ajouter des styles interne afin de colorier chaque titre avec la couleur associée (le fond de la page doit être noir) :

<html>

  <head>
    <!-- Add styles here -->
  </head>

  <body>
    <h1>#FFFFFF</h1>
    <h2>#CCCCCC</h2>
    <h3>#AAAAAA</h3>
    <h4>#777777</h4>
    <h5>#444444</h5>
    <h6>#333333</h6>
  </body>
</html>

Voici le résultat escompté :

Faire l'exercice en ligne

Solution

Quiz

Quel est le sélecteur CSS dans h1{color:blue;} ?

Toute la ligne

color

blue

Vérifier

Où se placent les styles CSS internes ?

Dans la page HTML où ils sont utilisés.

Dans un fichier séparé.

Dans la balise où ils sont utilisés.

Généralement dans la section <head> de la page.

Vérifier

Considérons le code suivant, de quelle couleur sera le texte dans la division ?

<style>
  div { color:red; }
</style>

... 

<div style="color:green;">Quelle couleur ?</div>

Rouge

Vert

Un vert rougeâtre

Ça dépend du navigateur

Vérifier

Considérons une page HTML qui ne contient qu'un seul style CSS :

p { color: red;}

Uniquement les textes contenus dans les balises <p> seront en rouge.

Uniquement le texte contenu dans la première balise <p> sera en rouge.

Le texte contenu dans la balise <p> et ses descendants seront en rouge.

Tout le texte de la page sera en rouge.

Vérifier

Cours 2.2 Sommaire Cours 2.4

Voir aussi

Dernière mise à jour : 26/05/2021