Etape 2

Mise en forme d'un paragraphe :

Nous allons nous servir dans ces deux exemples d'un fichier CSS externe, cette methode me parait la plus claire et la plus performante.
créez d'abord un fichier appelé style.css puis ouvrez ce fichier, nous allons commencer.

La balise HTML servant à définir un paragraphe est <P>, on va lui appliquer le syle voulu, a savoir le texte sera en arial de couleur rouge avec un corps de texte de 12px ainsi qu'une justification.

Dans le fichier style.css il suffit d'indiquer la balise ciblée, ici P pour paragraphe puis de definir les propriétés qu'on applique à cette balise entre accolades. Si l'on applique plusieures paramètres il suffit de les separer par des points-virgule (;).

p { font-family:arial ; color:red ; font-size:12px ; text-align:justify; }

Voila, c'etait pas bien dur, il ne reste plus qu'a appeller le fichier style.css dans votre document HTML comme on l'a vu plus haut, a savoir placer la balise suivante :

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

entre les balises <HEAD> et </HEAD>

Le style ainsi defini sera appliqué automatiquement à chaque fois que vous ferez appel à la balise <P> dans votre document HTML, vous n'avez par consequent plus besoin de choisir une police, une taille une couleur pour chaque paragraphe, CSS le fait pour vous.


Le seul "problème" est que le style sera appliqué à chaque fois que vous mettez du texte entre les balises <P> et </P>. Pour plus de souplesse et pour gerer au mieux les cas particuliers on peut faire appel aux classes.
Une classe est un style à part que l'on appelle seulement lorsque l'on a besoin de lui.
Etudions un exemple de classe en créant une bordure à un tableau.

 

Créer une bordure à une tableau :
Nous allons definir une bordure jaune de 1 pixel autour d'un tableau à l'aide d'une classe. L'avantage de la classe c'est de pouvoir la reutiliser pour autre chose, par exemple créer une bordure non plus au tableau entier mais uniquement à une de ses cellules ou lignes.

Toujours dans le fichier style.css, on va definir notre classe :

.maclasse {border:solid 1px yellow;}

Que remarque-t-on, d'abord la presence du point en debut de ligne, c'est lui qui indique que "maclasse" est une classe et non un style appliqué a une balise HTML. Le paramètre border peut recevoir jusqu'a 3 arguments c'est pour cela qu'il n'y a pas de separations.

Dans votre document HTML créez maintenant un tableau et faites appel à la classe ainsi definie.

<BODY>
<TABLE class="maclasse">
<TR>
<TD>....</TD>
</TR>
</TABLE>

Le résultat sera une bordure jaune autour de votre tableau, on peut egalement utiliser cette classe pour une seule cellule de ce tableau :

<BODY>
<TABLE>
<TR>
<TD>....</TD>
<TD>....</TD>
</TR>
<TR>
<TD>....</TD>
<TD class="maclasse">....</TD>
</TR>
</TABLE>

Vous comprendrez facilement que l'avantage des classes est de pouvour s'en servir uniquement lorsque l'on en à besoin, son on avait appliqué le même style aux balises <TABLE> ou <TD> (comme pour <P>) a chaque fois que vous insèrez un tableau il aurait été entouré de jaune, ou, dans le cas de <TD>, chacune de ses cellules auraient été cerclées de jaune.

Maintenant que l'on commence à aprecevoir la puissance des CSS etudions un dernier cas.