4.2 Pourquoi le CSS existe

18 octobre 2018

Séparer le contenu et le style

<basefont> a défini une police pour tout un document HTML
<font> a défini une police de caractères, une couleur et une taille pour le texte qu’elle contient
<center> horizontalement centré tout son contenu
<big> a augmenté la taille du texte
<strike> texte rendu avec un barré

Plusieurs attributs HTML pourraient également être utilisés :

bgcolor a défini une couleur d’arrière-plan sur l’élément
text défini la couleur du texte
plusieurs attributs de marge – margin peuvent être utilisés pour ajouter de l’espace de n’importe quel côté de l’élément

Pourquoi éviter les tableaux

Mais surtout, pour créer des colonnes, aligner visuellement des éléments et généralement positionner les éléments les uns par rapport aux autres, les développeurs Web ont utilisé l’élément <table> pour concevoir leurs pages Web, car il fournissait naturellement une grille visuelle :

<table>
  <thead>
    <tr>
      <th>Logo</th>
      <th colspan="2">Tagline</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="3">Copyright 2015</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Left menu</td>
      <td>Main content</td>
      <td>Right sidebar</td>
    </tr>
  </tbody>
</table>

Cette approche était lourde pour plusieurs raisons :

Les tableaux HTML sont verbeux : ils nécessitent beaucoup de code standard
le balisage était sémantiquement faux : les tableaux devraient être utilisés pour des données multidimensionnelles
changer la mise en page nécessaire pour changer le balisage : si on voulait déplacer la colonne de gauche vers la droite, il fallait modifier la structure HTML
les tables étaient sujettes aux erreurs de syntaxe : les lignes et les cellules doivent être ordonnées et imbriquées de manière spécifique pour être valides
le balisage était illisible : les tables étaient imbriquées dans les tables pour fournir des colonnes supplémentaires dans les colonnes

C’est la raison pour laquelle l’utilisation de tableaux à des fins de mise en page a été lentement abandonnée et que CSS a été utilisé à la place.

Qu’est-ce que le CSS ?

CSS est l’acronyme de Cascading Style Sheets. Son but est de styliser les langages de balisage (comme HTML ou XML). Par conséquent, CSS ne vaut rien, à moins d’être associé à un document HTML.

CSS donne vie à un document HTML en choisissant des polices, en appliquant des couleurs, en définissant des marges, en positionnant des éléments, en animant des interactions, etc.

Comment fonctionne le CSS ?

CSS fonctionne en sélectionnant un élément HTML (comme un paragraphe), en choisissant une propriété à modifier (comme la couleur) et en appliquant une certaine valeur (comme le rouge) :

p {color:red;}

Le mot «Style» peut être trompeur. Vous pensez peut-être que CSS n’est utilisé que pour changer la couleur, la taille et la police du texte. Mais CSS est capable de définir la mise en page d’un document HTML, en définissant des hauteurs, des largeurs, des marges intérieures et extérieures, des positions, des colonnes, …

Où est-ce que j’écris le CSS ?

CSS en tant qu’attribut

Vous pouvez écrire du CSS directement sur un élément HTML, en utilisant l’attribut style :

<p style="color: red;">Ce paragraphe est écrit en rouge.</p>

CSS dans le <head>

Vous pouvez utiliser une balise <style> dans le <head> de votre document HTML :

<html>
  <head>
    <title>Bonjour tout le monde !</title>
    <style type="text/css">
      p {color: red;}
    </style>
  </head>
  <body>
    <p>Ce paragraphe est écrit en rouge.</p>
  </body>
</html>

CSS dans un fichier séparé

Vous pouvez écrire votre CSS dans un fichier séparé avec une extension .css, puis le lier à votre HTML en utilisant la balise HTML <link>.

p {color:red;}

<html>
  <head>
    <title>Bonjour tout le monde !</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Ce paragraphe est écrit en rouge.</p>
  </body>
</html>

C’est le document HTML qui « appelle » le fichier CSS, dans ce cas un fichier appelé style.css situé – pour cet exemple – dans le même dossier que le fichier HTML.

Cette 3^ème méthode d’utilisation d’un fichier CSS séparé est préférable.

Pourquoi ne pas donner du style directement dans le HTML ?

Parce que nous voulons séparer le contenu (HTML) de sa présentation (CSS).

Si vous souhaitez visualiser le but de cette distinction, dirigez-vous vers le merveilleux CSS Zen Garden : chaque design utilise exactement le même code HTML, mais un code CSS différent à chaque fois.

Cela facilite également la maintenance: le même fichier CSS peut être utilisé pour tout un site Web. Il offre de la flexibilité : concentrez-vous sur le contenu d’un côté, le style de l’autre. Des fins de référencement, des préoccupations différentes.