Feuilles de style CSS

Avec la nouvelle normalisation HTML 4.x, l'introduction des feuilles de style à été normalisée. Mais Internet Explorer n'en comprend que le 60% et Netscape 4.x que le 30%.

Les feuilles de style sont donc à utiliser avec précaution. Si vous travaillez avec ces deux visualisateurs, essayez cette page et vous constaterez les différences.

Le but de la feuille de style externe est d'unifier la présentation de vos pages Web. Lorsque vous désirez changer le look de vos pages, vous intervenez uniquement sur la feuille de style. Vous pouvez changer les polices de caractère, leur taille, la couleur. Vous pouvez changer la couleur de fond, la présentation des titres (H1,H2, etc), les paragraphes, ainsi que les tableaux.

Il est bien clair, que les images, les sons et les textes seront à modifier dans leurs propres pages, ainsi que leurs positions.

Index

Mise en place
Textes décorés
 De beaux cadres
 De jolis titres

Feuille interne ou externe au document 

<HEAD>

// feuille de style interne
<STYLE type="text/css">
<!--
BODY{
  font-family : arial;
  font-size : 10pt;
  color : #003080;
}
ADDRESS{
  font-size : 7pt;
  text-align : right;
}
// -->
</STYLE>


// ou pour une seule balise HTML, avec une définition directe

<b style="font-size:12pt">TEXTE</b>

<b style="cursor:wait">TEXTE</b>

// ou pour une feuille déclarée en externe

<LINK HREF="st.css" REL="stylesheet" TYPE="text/css">

</HEAD>
Voici comment introduire dans votre document HTML une feuille de style.

le deuxième exemple met un sytle directement sur une balise.

Pour unifier vos pages, la dernière solution est idéale.

Remarque: Attention, seules quelques commandes sont reconnues par les deux browsers.

Haut de la page

Des beaux cardes pour vos pages 


<HEAD>
<STYLE type="text/css">
<!--
// définition d'une classe
.cadre	{
	border-style : ridge;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
// -->
</STYLE>

<BODY>
<P class=cadre>
VOTRE TEXTE
</p>

...
...
Voici des cardes pour vos titres ou ...

BORDER-STYLE : ridge

BORDER-STYLE : groove

BORDER-STYLE : inset

BORDER-STYLE : outset

Remarque: Avec Netscape 4.x les cadres présentent des différences.
Haut de la page

De jolis titres 


// dans la feuille de style
// définition d'une classe
.titre1	{
	width  : 400;
	height : 40;
	font-family : arial;
	font-size   : 40pt;
	font-weight : 900;
	filter      : dropShadow
      	(color=#00CCFF,offX=5,
	offY=5,positive=1)
	}

// dans le corps
<font face="arial" size=8 color=#FF0000>
<span class=titre1>
BONJOUR
</span>
</font>
Des beaux titres sans avoir recours aux images.

BONJOUR

Seulement utilisable avec I.E.4x et plus

Haut de la page

Textes décorés 


<p style="width=100%; 
  filter:Glow(color=#FF80C0, strength=15)">
  <font size="28" color=#ffffff>Votre texte</font>
</p>
Voici une manière amusante de donner un style à vos textes
La valeur de strength donne l'intensité de l'effet (1 à 255)

Feuille de style
Voici un moyen sympathique
de faire une jolie décoration...

Seulement utilisable avec I.E.4x et plus

Haut de la page

[Home Page][Programmation]

Jean-Pierre Perroud
Switzerland
Dernière mise à jour le 16 avril 2005