Conception & Réalisation de sites Web

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" />

Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!