Accueil du site > WEBMASTERING > STYLES CSS

CSS : Introduction

Les feuilles de styles permettent d’harmoniser la présentation des documents. Apparues en 1997, les feuilles de styles en cascade constituaient une nouveauté puisqu’elles réorientaient indirectement HTML et PAO.

LIAISON D’UN DOCUMENT HTML AVEC UNE FEUILLE DE STYLE

On peut appliquer un ensemble de règles de style à tout un document : c’est l’approche globale. Mais on peut aussi modifier ponctuellement l’apparence de tel ou tel élément isolé.

L’approche globale

Il y a deux façons d’appeler une feuille de style : l’incorporer au document ou y faire référence, comme on le fait d’un document HTML avec un appel de lien. Cette dernière méthode convient particulièrement au travail en groupe, puisque ainsi tout le monde travaille selon le même modèle.
Pour notre exposé, nous adopterons toutefois la première méthode qui a l’avantage pédagogique de centrer l’intérêt sur tel ou tel point particulier des feuilles de style. Pour cela, nous utiliserons la forme la plus simple de l’élément STYLE dont voici un exemple :

<HTML>
<HEAD>
<TITLE>Une feuille de style</TITLE> <STYLE type="text/css"> H1 font-family:courier new #soustitre font-size:small </STYLE>
</HEAD>

<BODY>
Variations sur les polices
<H1>Titre "H1" affiché avec une police Courier New</H1>
Nous allons afficher deux sous titres.
<H2>Ce titre est un "H2" affiché avec la police par
défaut</H2>
<H2 id="soustitre">Ce titre est un "H2" affiché avec une
police plus petite</H2> </BODY>
</HTML>

Les règles de style ainsi définies s’appliquent globalement au document, sauf si on y déroge ponctuellement.

L’approche locale

Il y a plusieurs moyens de modifier ponctuellement l’aspect d’un élément HTML. On peut répartir les éléments d’un même document en différentes classes qui seront alors repérées par l’attribut class, ou particulariser un élément isolé au moyen d’un identificateur nommé par l’attribut id. Il est également possible d’utiliser l’attribut style (à ne pas confondre avec l’élément STYLE) en définissant une ou plusieurs règles de style, directement, à l’intérieur d’un élément.

Enfin, l’élément SPAN permet d’isoler une partie d’un paragraphe ou du contenu d’un élément DIV et d’y appliquer un style particulier.