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
|