INTRODUCTION AUX CSS
(Cascading Style Sheet)

Voici le premier article d'une longue série sur les CSS. Avec celui-ci nous verrons les bases des CSS et apprendrons à mettre en forme une page constitué d'un simple texte. Rassurez-vous, nous apprendrons très vite à utiliser toutes les possibilités offertes par les CSS, cet article ne constituant qu'une introduction.

Les CSS ont fait l'objet d'une recommandation du W3C (1) en décembre 1996.Elles sont prise en charge à partir d'Internet Explorer 3.0 (c). Ils
permettent grace à une feuille de style (taille des polices, choix des polices, couleurs, background, etc.) de mettre en forme une page HTML selon les désirs des auteurs ou les préferences des utilisateurs. Les Feuilles de Style en cascade requièrent de bonne connaissance en HTML.

1. LES BASES

A. Ecrire une feuille de style

Ecrire une feuille de style est des plus simple ; dans l'exemple ci-dessous nous souhaitons que nos paragraphes (balise <p></p>) soient mis en forme selon les données suivantes :

- taille des polices : 12px
- type de police : Verdana, Arial, Helvetica, Monospace;
- couleur de police : noir
- couleur de background : aucune/transparent
- mise en forme du texte : justifié

Notre CSS ressemblera donc à cela :

p {
background-color : transparent;
color: #000000;
font-family : Verdana, Arial, Helvetica, Monospace;
font-size : 12px;
text-align: justify;
}

Notez la mise ne forme du CSS qui en AUCUN cas ne doit ressembler à cela :

p { background-color : transparent; font-family : Verdana, Arial,
Helvetica, Monospace; font-size : 12px; color: #000000; text-align:
justify; }

Ce qui nous donne :

[<p>Vous allez bénéficier de 10 minutes de temps supplémentaire de connexion au liveshow</p>]

B. LIER UNE FEUILLE DE STYLE A UNE PAGE HTML

Pour lier notre CSS à notre page nous utiliserons les balises <style></style>. Le plus simple est d'inclure le Style directement dans le HEAD de la page, comme suit :

<html lang="fr">
<head>
<style type="text/css">
p {
background-color : transparent;
font-family : Verdana, Arial, Helvetica, Monospace;
font-size : 12px;
color: #000000;
text-align: justify;
}
</style>
</head>

<body>
<p>Vous allez bénéficier de 10 minutes de temps supplémentaire de
connexion au liveshow</p>
</body>
</html>

Cela risque pourtant de poser des problèmes de clarté à la lecture du code devant la masse parfois énorme d'information contenues dans le HEAD.Aussi une seconde méthode est-elle préconisée : enregistrer sa feuille de style dans un fichier externe à la page.

<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="moncss.css" />
</head>

<body>
<p>Vous allez bénéficier de 10 minutes de temps supplémentaire de
connexion au liveshow</p>
</body>
</html>

C. Mettre en forme un texte en HTML

Voila à quoi pourrait ressembler une feuille de style externe comportant l'ensemble des balises HTML pour la mise en forme du texte.

background-color: définit la couleur du background
font-family: définit le type de fonte
font-size: définit la taille des polices
color: définit la couleur des fontes
text-align: définit l'alignement du texte
OL: définit une liste (ex. 1. 2.3.)
UL: définit une liste (puce)
A:link lien
A:visited lien (visité)
A:active lien (actif)
A:hover lien (rollover)


et voila ;)

Emmanuel