Je vais vous parler de styles CSS, et plus précisément des règles CSS qui sont appliquées par défaut par les navigateurs sur les pages Web que vous créez.

Nous allons voir quelles sont ces règles, comment les trouver et pourquoi il est intéressant de les réinitialiser.

Regarder la vidéo sur YouTube

Cet article est la 2e partie d'une série qui explique comment réaliser un site Internet de A à Z. Vous n'avez pas besoin d'avoir lu ou vu les parties précédentes pour comprendre cette partie. Les autres épisodes sont disponibles ici.

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Dans la première vidéo, nous avons créé cette page : 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
    <header>
      <a href="lien-accueil">Accueil</a>
    </header>
    <main>
      <h1>Derniers posts</h1>
      <p>Les derniers articles</p>
    </main>
    <footer>
      <p>Autres projets :</p>
      <ul>
        <li><a href="lien-youtube">Abonnez-vous à ma chaîne YouTube</a></li>
        <li><a href="lien-twitter">Suivez moi sur Twitter</a></li>
      </ul>
    </footer>
  </body>
</html>

On peut afficher cette page dans un navigateur, Firefox dans mon cas, et constater que des styles sont déjà appliqués :

  • Il y a un espacement entre le bord de la page et le texte, en haut de page et sur les côtés ;
  • Les liens sont bleus et soulignés ;
  • Le titre a une taille plus importante, et est affiché en gras ;
  • La liste des éléments du pied de page est décalée horizontalement par rapport aux autres textes.

Ces styles n'ont pas été définies dans la page HTML que nous avons créée. Ils proviennent directement du navigateur qui applique des règles CSS par défaut aux pages.

Les navigateurs appliquent des règles par défaut aux pages car cela permettait probablement aux utilisateurs, historiquement, de comprendre plus facilement la structure des pages, et de faire aisément la distinction entre un lien, de couleur bleue et souligné, et un texte normal par exemple. Pour les mêmes raisons, les titres sont affichés avec une police plus importante, un peu comme un livre ou des titres/sous-titres dans un rapport.

On peut retirer ces styles si on le souhaite, et retirer tous les styles de la page, pour ensuite définir nos propres styles. Il faut néanmoins faire attention à ce que nos styles personnalisés ne cassent pas les codes que les internautes ont l'habitude d'utiliser, et permettent toujours à nos visiteurs de consulter nos pages facilement, sans trop de réflexion.

Styles CSS par défault de Firefox

Sur le navigateur Firefox, on peut consulter les styles CSS par défaut en saisissant l'adresse : resource://gre-resources/html.css.

On y trouve les règles que l'on a constatées initialement, à savoir :

  • Les balises h1 affichées de taille plus importante (font-size: 2em) et en gras (font-weight: bold).
  • La pastille ajoutée aux listes (list-style-type: disc).
  • Les éléments des listes ul décalés (padding-inline-start: 40px).

On pourrait très bien se contenter de ces styles, ou de créer un style à partir de cette base, mais nos pages risqueraient de ne pas être affichées de la même manières sur tous les navigateurs, car chaque navigateur utilise ses propres styles par défaut.

Le plus simple est souvent de supprimer ces styles par défaut pour avoir une baise saine et identique à tous les navigateurs. C'est ce qu'on va faire.

Réinitialiser les styles CSS des navigateurs

On peut commencer par ajouter une feuille de style à notre page, qui contiendra nos règles CSS.

Deux solutions sont possibles :

  • intégrer directement les règles dans l'en-tête de la page HTML, par exemple : <style>body { color: red; }</style>
  • ou créer un document séparé qui contiendra ces règles.

Pour que notre projet soit mieux organisé, nous allons créer les règles CSS dans un fichier séparé, en ajoutant une une balise <link> à notre en-tête :

<link rel="stylesheet" href="style.css">

Cette feuille de style style.css contiendra les règles suivantes appliquées à tous les éléments (sélecteur *) :

  • margin: 0; pour retirer la marge de tous les éléments, notamment celle entre le bord de la page et le texte.
  • padding: 0; pour retirer la marge intérieure située entre le texte et la bordure des éléments.
  • box-sizing: border-box; pour modifier la façon dont les navigateurs calculent la taille des éléments, et indiquer que la taille indcut le contenu, le padding et les bordures, et pas seulement le contenu.
  • line-height: inherit;, color: inherit;, font: inherit; pour que la taille des lignes de texte, la couleur du texte, et la police soient héritées depuis l'élément parent.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: inherit;
  color: inherit;
  font: inherit;
}

Une règle est aussi ajoutée aux liens (sélecteur a) :

  • cursor: pointer; pour qu'un curseur en forme de pointeur soit affichée.
  • text-decoration: none; pour que les liens ne soient pas soulignés par défaut.
a {
  cursor: pointer;
  text-decoration: none;
}

Une règle est aussi appliquée aux listes non-numérotées (ul) et aux listes numérotées (ol) : list-style: none; pour enlever la pastille des éléments d'une liste.

ul, ol {
  list-style: none;
}

On peut afficher notre page et constater que tous les styles du navigateur sont désormais retirés : les textes sont de la même police, et sont situés en haut à gauche de la page.

D'autres propriétés pourraient être aussi retirées, comme celles spécifiques aux boutons (button) ou aux formulaires (input). On les verra probablement plus tard, lorsqu'on utilisera ses balises.

Note: Le prochain épisode est disponible ici et le précédent ici.