TUTORIELS 
Introduction aux feuilles de style
Apprendre à maîtriser l'apparence précise de ses pages web, grâce aux feuilles de style (Cascading Style Sheets).  (15 mars 2001)
 

Contrôler l'apparence des ses pages HTML s'avère parfois très frustrant, car le langage en lui-même n'est pas doté d'outils puissants et intuitifs pour le faire. Depuis les versions 4.0 de Navigator, d'Opera et d'Internet Explorer, il est devenu possible de remédier à cela en tirant profit des spécifications du consortium W3C concernant les feuilles de style (Cascading Style Sheets ou CSS). Ce langage, complémentaire du HTML, procure une totale maîtrise de l'affichage des pages web. Il existe aujourd'hui deux niveaux de spécifications du langage (CSS1 et CSS2), le second niveau n'étant implémenté que par les navigateurs les plus récents. Des références pour ces deux niveaux sont disponibles auprès du W3C.

Une feuille de style définit un modèle pour une ou plusieurs pages HTML. Un style associé à une balise en particulier ne sera précisé qu'une seule fois, simplifiant considérablement les changements ultérieurs et réduisant sensiblement le poids des pages. Par exemple, on pourra regrouper, au sein d'un unique fichier (.css), toutes les règles de style qui définissent l'aspect visuel d'un site entier. Cela s'avère particulièrement pratique pour des sites professionnels dont la charte graphique est rigoureuse, et plus encore quand celle-ci doit subir un renouvellement en profondeur. Cet article explique ce qu'est une règle CSS1 et précise comment un ensemble de règles peut être appliqué à un document HTML. La définition de classes et les spécifications CSS2 sont étudiés dans un autre texte, où l'on explorera plus en profondeur les atouts du langage.

A quoi ressemble une règle CSS?
Prenons l'exemple suivant : imaginons que notre page web utilise deux types de police (disons : Arial 12pt en italique rouge et Verdana 10pt en bleu), et ce de très nombreuses fois et à tour de rôle. Cela nécessitera, en HTML, d'utiliser la balise <FONT> et sa cohorte d'attributs pour chaque changement de police. C'est à la fois fastidueux et préjudiciable au temps de chargement de la page. Mais en utilisant les feuilles de style, ce problème disparaît : il nous suffit de caractériser chacune de nos polices avec les balises <H1> et <H2> par exemple, balises auxquelles on aura préalablement associé le style que nous souhaitons :

H1 {font-family:Arial; font-size:12pt; font-weight:italic; color:red;}

et:

H2 {font-family:Verdana; font-size:10pt; color:blue;}


Le modèle étant le suivant:

Sélecteur {Définition de style}

Comment combiner CSS et HTML?

Il existe trois façons distinctes d'insérer ces définitions de style dans le code HTML. La première consiste à définir une balise <STYLE> au sein de la balise <HEAD> du document :

<STYLE type="text/css">
<!--
H1 {font-family:Arial; font-size:12pt; font-weight:italic; color:red;}
H2 {font-family:Verdana; font-size:10pt; color:blue;} -->
-->
</STYLE>


La deuxième méthode consiste à utiliser l'attribut STYLE des balises <H1> et <H2>:

<BODY>
<H1>H1 normal</H1>
<H1 STYLE="font-family:Arial; font-size:12pt; font-weight:italic; color:red">H1 modifié</H1>
<H2>H2 normal</H2>
<H2 STYLE="font-family:Verdana; font-size:10pt; color:blue">H2 modifié</H2>
</BODY>

Cette solution, bien sûr, tout en permettant de conserver le style « par défaut » de <H1> et <H2>, est de loin la moins avantageuse. Elle ne s'applique que pour définir le style d'élements isolés.

Enfin, la troisième méthode consiste à établir un lien vers le fichier .css qui contient toutes les règles. Cela impose de créer un fichier regles.css par exemple, qui contient les lignes suivantes, à l'exclusion de toute autre :

H1 {font-family:Arial; font-size:12pt; font-weight:italic; color:red;}
H2 {font-family:Verdana; font-size:10pt; color:blue;}


Puis, dans la balise <HEAD> de note fichier HTML, on écrira :

<LINK REL="stylesheet" TYPE="text/css" HREF="regles.css" TITLE="MonStyle">


Ainsi, plusieurs liens externes peuvent être « importés » dans le document HTML, et dans le cas de règles conflictuelles, la dernière définition l'emporte.

Ces exemples sont parmi les plus simples que l'on puisse donner, et ne reflètent que vaguement la capacité de contrôle que procurent les feuilles de style aux développeurs web. Il devient possible, en effet, de positionner un texte au pixel près, et de maîtriser ainsi des aléas inhérents au seul langage HTML.

Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius

 
[ Jérôme MorlonJDNet
 
Accueil | Haut de page