Les feuilles de style, pourquoi faire ?
Les lacunes du HTML
En HTML, pour mettre en forme un titre nous utilisons la balise <font>.
Par exemple :
<h2><font size="+1" color="#333366" face="Verdana, Arial, sans-serif">Mon titre ici</font></h2>
Ce qui donne le résultat suivant :
Mon titre ici
Imaginons que nous ayons 6 titres dans la même page, avec la même présentation, nous répéterions 6 fois notre balise <font> avec tous ses attributs. Ceci donnerai un code bavard et nous obligerai à de multiples modifications le jour ou l'on souhaite modifier la couleur de nos titres.
La solution, séparer le code et la présentation avec les CSS
Avec les feuilles de style, nous allons regrouper les informations de présentation une fois pour toute pour notre page.
Nous allons pour cela utiliser une balise <style> que nous placerons dans les entêtes de notre page web, c'est à dire quelque part entre les balises <head> et </head>.
Nos instructions de style seront placées entre les balises <style> et </style>.
Exemple :
<style type="text/css">
h2 { color:#333366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px;}
</style>
Et notre code HTML sera alors réduit :
<h2>Mon titre ici</h2>
Ce qui donne le même résultat :
Mon titre ici
Des styles similaires pour plusieurs pages
Il est également possible deregrouper les informations de présentation dans un fichier à part qui pourra être appelé par plusieurs pages.
Ceci est même vivement conseillé afin de garder une cohérence visuelle d'une page à l'autre.
Nous allons pour cela utiliser une balise <link> que nous placerons dans les entêtes de notre page web et pour laquelle nous préciserons le chemin vers la feuille de style.
Ce fichier feuille de style sera un simple fichier texte contenant nos instructions, que l'on renommera avec l'extension «.css»
Exemple, je créé un fichier "style.css" avec les instructions suivantes :
h1 { color:#000066; font-family:Verdana, Arial, sans-serif; font-size:18px;}
h2 { color:#333366; font-family:Verdana, Arial, sans-serif; font-size:14px;}
Et dans ma page, j'appelle ce fichier ainsi :
<link rel="stylesheet" href="style.css" type="text/css" />
