Publicité

Voici la Feuille de Styles (CSS) utilisée dans l'exemple ci-dessous :

<STYLE TYPE="text/css">
<!--
.s1 {text-decoration : none; background-color : #CCFFFF; color : #FF0033}
.s2 {border-width : 0; background-color : #CCFFFF; color : #330066}
.s3 {border-color : #999900; border-style : solid double; border-width : thick}
.s4 {border-color : #FF00FF; border-style : inset; border-width : thin}
.s5 {border-color : #FF6699; border-style : outset dashed; border-width : medium}
//-->
</STYLE>

Vous remarquerez qu'elle se déclare avec un point suivi d'un nom : .s1 { }
Vous pouvez également attribuer une feuille de style à l'ensemble d'un tag, comme pour <A ..> (voir l'article "Personnalisez vos liens dans vos pages Web")

Dans l'exemple ci dessous, nous jouons sur la couleur et sur le style :

La couleur :
- fond : background-color : #xxxxxx
- texte : color : #xxxxxx
- bordure : border-color : #xxxxxx

le style :
- texte : text-decoration : none | underline | overline | line-through | blink
- bordure :
border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width : thin | medium | thick | x (valeur)

Voici ce que cela donne :

	Description	Avec CSS	Sans CSS
s1	Un SelectBox avec fond et police colorés	DevParadise Logithèque TechnoWeb Actualité	DevParadise Logithèque TechnoWeb Actualité
s2	INPUT TYPE=TEXT (ou PASSWORD) avec fond colorés et sans bords
s3	Cellules de tableau de styles différents	Bordure 1	Bordure 1
s4		Bordure 2	Bordure 2
s5		Bordure 3	Bordure 3

A vous maintenant d'essayer, mais attention à votre chartre graphique !
Une dernière chose, les CSS sont 100% compatibles avec Internet Explorer et très très peu compatibles avec Netscape 4.x. Netscape 6 en accepte certaines ...