FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

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 :

Syntaxe du style CSS interne

Dans cette illustration, les titres de niveau 1 et leurs déscendants 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 :

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é.

Voir aussi


Dernière mise à jour : 16/11/2019