Etape 1

Comment mettre en forme ses pages HTML avec les CSS

La technologie des feuilles de style en cascade (CSS ou Cascade Style Sheets) à été introduite par Microsoft en 1996 avec pour but de modifier les pages html à l'aide de divers effets surprenants. Les feuilles de style servent essentiellement à la mise en forme de pages html mais les possibilités offertes sont quasiment illimitées.

Note : Internet Explorer à partir de la version 3.0 (attention la version d'Internet Explorer 3.0 ne gère pas toutes les propriétés des feuilles de styles) et, Netscape à partir de la version 4 supportent les feuilles de styles.

Syntaxe des css :
La syntaxe des CSS est toujours identique, le but est de redefinir le role d'une balise HTML en lui imposant des nouveaux parametres et propriétés. Pour cela on dispose de plusieures methodes : Utiliser un fichier externe contenant tous les styles que l'on souhaite appliquer à la page, definir les styles directement dans le document HTML entre les balises <head> et </head> ou bien appliquer un style directement a une balise html (ex <p style="text-align:justifiy">, cette methode est longue et pas tres interessante).

Appel d'un fichier CSS externe (style.css) :

<HEAD>
 
<LINK REL="stylesheet" HREF="style.css" TYPE="TEXT/CSS">
 
</HEAD>

Définition des styles directement dans le document HTML :

<HEAD>
 
<STYLE type="text/css">
H1 { font-size:12pt; color:#FF0000 }
</STYLE>
 
</HEAD>

Appliquer le style directement à une balise :

<BODY>
 
<DIV style="margin-left:20px; color:red">
Mon paragraphe en rouge decalé de 20 px
</DIV>
 
</BODY>

Passons maintenant à la pratique, à travers 2 exemples concrets nous allons tout d'abord apprendre a appliquer une mise en forme automatique à un paragraphe puis créer une bordure à un tableau.