Les feuilles de style

L es feuilles de style constituent la grande nouveauté de HTML 4.0, elles sont utilisées dans tous les traitements de texte modernes, pour la production de documents (devis, lettres commerciales, factures). Sur le Web, chaque fois qu'une page est chargée, le navigateur détermine lui-même les balises HTML. Il manquait au HTML un élément inportant, cette nouvelle extention HTML a été conçue pour donner plus de souplesse aux développeurs. Les feuilles de style sont la solution attendue pour le contrôle des polices de caractères, des tailles, des couleurs, le chevauchement des textes, la taille des titres, la couleur de fond de page, les marges, etc...mais également le moyen de modifier le look des pages d'un site plus rapidement. HTML n'est pas lié à un type de feuilles de style et il est possible d'utiliser n'importe quel langage, du plus simple au plus compliqué.
Le nom qui a été donné par le W3C le 17 décembre 1996 est CSS1 ( Cascading Style Sheet version 1 ), CSS ou feuilles de style en cascade". Cascade par le fait, qu'il est possible de réunir et mélanger des informations provenant de plusieurs feuilles de style, elles peuvent être constituées comme fichiers séparées, être incluses dans une page HTML ou importées dans un document. Lors de la lecture du fichier par le navigateur, celui-ci va respecter un ordre pour interpréter les informations de styles, en premier lieu les styles liés, puis les styles incorporés pour finir par les styles locaux.

Actuellement, les navigateurs qui reconnaîssent les feuilles de style sont Netscape Communicator 4.0x et Explorer 4.0 pour les plates-formes Macintosh et Windows.

O n rencontre trois types de feuilles de style :

Les styles locaux

Les styles locaux permettent de prendre n'importe quelle balise HTML et de lui affecter un style. Par exemple, pour contrôler dans un paragraphe <P> le choix de la police, la taille et la couleur, il faudra utiliser la balise </P> pour passer à d'autres normes de style.

Exemples:

<P style="font: 14pt times">
Le texte de ce paragraphe va s'afficher avec la police Times et avec la taille de 14 points. </P>

Voici le texte avec la police Times en 14 points.
<P style="color: green">
Le texte de ce paragraphe va s'afficher en couleur. </P>
Voici le texte avec la couleur verte.
<P style="color: yellow; font: 16pt times">
Le texte de ce paragraphe va s'afficher en couleur avec Times en 16 points. </P>
Voici le texte avec la couleur jaune, la police Times avec la taille de 16 points.

Pour définir un style applicable à une partie de votre page, vous pouvez placer un attribut STYLE dans une balise <DIV> ou <SPAN>.

<P style="color: yellow">
Le texte de ce paragraphe va s'afficher en jaune,
<span style="color: green">à partir de cette attribut il affichera en vert, </span> pour revenir à la couleur par défaut.
</P>
Le texte va s'afficher en jaune, puis en vert, pour revenir à la couleur par défaut.

La balise <DIV>---</DIV> permet un saut de ligne, tandis que la balise <span>---</span> permet de modifier le style de n'importe quelle partie de texte dans un paragraphe.

Les feuilles de style incorporées

Les styles incorporées fonctionne avec la balise <STYLE> pour définir l'apparence du texte dans les paragraphes, des titres, la couleur du fond de page, la police de caractère, sa couleur, la taille du caractère, des marges du haut, de droite et de gauche, etc. Cette balise se place sous la balise <HEAD> et avant la balise <BODY> au sein d'un fichier HTML. Dans l'exemple ci-dessous, on découvre que La syntaxe d'une feuille de style est différente et ne ressemble plus au HTML traditionnel. Avec ce nouveau standard, on définit le corps de page avec une couleur de fond, une couleur pour le texte dans les paragraphes, la taille en points pour les titres ainsi que la police mais également les marges.

Dans l'exemple ci-dessous, on a défini que notre titre <H1> aura la police "verdana" et que sa taille sera en points de "36pt", les paragraphes auront la police "Arial, Helvetica, sans-serif" de style "normal" avec pour cloix de couleur "#0000CC". C'est l'aspect intéressant que l'on découvre dans l'utilisation des feuilles de style, d'avoir le contrôle pour les différentes polices que l'on souhaite utiliser dans une page pour les titres et paragraphes. Grâce aux feuilles de style, finies les pages HTML avec des quantités de balises <FONT> dans son fichier, le style est désormais géré d'une manière propre, donc rapidité pour le chargement d'une page sur le navigateur.

Toujours dans cet exemple on découvre une nouvelle syntaxe A "color:#00CCCC; text-decoration: none" bien pratique qui permet de définir pour les liens dans une page la suppression du soulignement avec une couleur différente du texte, ce qui donne un beau résultat pour la lecture à l'écran.

<style>
body {background-color: #CCFFCC; margin-top: .20in; margin-left: .60in}
h1 {font: 20pt verdana; color: #993333; size:36pt; weight: bold}
p {color:#0000CC font-family: Arial, Helvetica, sans-serif; font-style: normal}
a {color:#00CCCC; text-decoration: none}
</style>

exemple

Les feuilles de style liées

Les feuilles de style liées sont appliquées de manière externe, ces fichiers sont codés exactement comme pour une feuille de style incorporée, à la différence qu'ils sont placées comme fichier externe avec une propre extension .CSS . Ce qui permet de définir pour une série de page Web une feuille de style (Cascading Style Sheet), de cette manière ces styles vont s'appliquer dans toutes les pages qui feront référence au fichier "style.css" qui ce trouve dans le même répertoire sur le serveur, en employant la syntaxe "<link rel=stylesheet href="style.css" type="text/css">" après la balise <html> et avant la balise </head>.
<html>
<head>
<title> Page avec une feuille de style externe.
<link rel=stylesheet href="style.css" type="text/css">
</head>