Retour
Définition :
Les feuilles de style sont déjà très utilisées dans les
traitements de texte afin d'en facilité la mise en page.
Beaucoup d'auteurs de site souhaitaient avoir la même
possibilité pour leurs pages HTML, ce qui a été rendu possible
par la mise en place des CSS (Cascading Style Sheets).
Grâce aux CSS, vous créez le style d'un paragraphe, d'un
tableau, d'un mot, et vous appliquez ce style à toutes vos
pages. De même, si vous désirez modifier le style de votre
site, une modification, et tout le site est modifié ==> Gain
de temps, les pages sont homogènes.
Inconvénients :
Cela ne fonctionne qu'avec les navigateurs récents (IE4 N4) et certaines instruction fonctionnent avec Internet Explorer et pas avec Netscape Navigator et l'inverse, donc prudence....
Comment faire ?(norme CSS1)
Nous avons la possibilité d'écrire le code de notre style avec la balise <STYLE> :
- Directement dans le paragraphe
- Dans la partie <HEAD> de la page
- Dans un fichier externe (pour un style pour tout le site)
Et maintenant, entrons dans le détail.
Directement dans le paragraphe :
<H1 STYLE="color:red">Le titre de niveau 1 sera affiché en rouge</h1>
résultat : Le titre de niveau 1 sera affiché en rouge
Ce style ne sera appliqué que pour cette phrase.
Pour obtenir le même effet pour tous les titres de niveau 2 dans la page, nous devons créer le style directement dans la partie HEAD de la page . Exemple :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H2 {color:red}
H1 {color:blue}
</STYLE>
Tout texte encadré par les balises H2
sera en rouge, tout texte encadré par H1 sera écrit en bleu
Pour pouvoir appliqué ce style à tout le site, il est conseillé de le mettre dans un fichier externe et que chaque page du site fasse référence à ce fchier, ainsi tout modification de ce fichier sera immédiatement répercutée.
Le fichier est composé de la manière suivante :
/* mon fichier de style*/
H2 {color:red}
H1 {color:blue}
/* fin de définition */
Dans les pages, on appelle le fichier à l'aide de la balise LINK :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
</HEAD>
Nous pouvons très bien combiner les 3 possibilités, ce que je fais dans cette page en utilisant le fichier externe commun à tout mon site et un style pour la balise UL que j'ai défini dans la partie HEAD.
Haut de la page