Insertion d'une feuille de styles

Info

Une feuille de style s'insère grâce à la balise <STYLE>
Nous l'écrirons :

<STYLE type="text/css">
identifiant { une de vos définitions des styles}
</STYLE>

Cette balise se trouve généralement dans la balise <HEAD> et en dessous de la balise <TITLE>.
Mais il est possible de le mettre directement dans la balise.
Nous l'écrirons alors :

Info

Je dirais qu'il existe trois manières d'imposer un style.

- La première consiste à mettre le style directement dans la balise.
- La seconde consiste à imposer un style à un endroit précis du document HTML, pour cela nous utiliserons la balise <DIV> ou <SPAN> pour délimiter l'endroit.
- La troisième consiste à imposer un style à toutes les balises du même type (<P> par exemple) et de personnaliser chaque balise en lui rajoutant des caractéristiques propre. Pour cela nous utiliserons l'attribut CLASS.

Comment atteindre la zone

Info

On peut atteindre la balise de trois façons :
- Par le Nom de la Balise.
- Grâce à l'attribut ID.
- Grâce à l'attribut CLASS.

Nom balise

Avec le nom de la balise :
Par exemple nous voulons que ce qui se trouve dans la balise <ADDRESS> soit souligné.
Nous mettrons dans la feuille de style :

ADDRESS { text-decoration:underline; }

Le code HTML sera :

Cette technique est embêtante lorsque l'on possède plusieurs balises <ADDRESS>, car toutes seront soulignées. (voir plus bas CLASS)

Id

Avec ID :
Nous mettrons dans la feuille de style :

#nom { text-decoration:underline; }

Le code HTML sera :

Cette technique est intéressante, puis qu'elle permet d'assigner le soulignement à toutes les balises ayant comme ID "nom".

Class

Avec CLASS :
Nous mettrons dans la feuille de style :

.nom { text-decoration:underline; }

Le code HTML sera :

Cette technique est intéressante, puis qu'elle permet d'assigner le soulignement à toutes les balises ADDRESS ayant comme class "nom".

CLASS permet de créer des "sous styles", par exemple :
Vous voulez que tous vos paragraphes aient une taille de police de 12 px, mais votre second paragraphe à une couleur verte et votre troisième paragraphe est souligné.
Vous allez donc crée dans votre feuille de style créer un style pour que tout les paragraphes soient en taille 12px :

P { font-size:12px }

Puis créer deux sous classes pour les deux autres paragraphes :

P.nom { color:green; }
P.nom1 { text-decoration:underline; }

Votre code HTML sera :

<P> votre paragraphe </P>
<P class="nom"> votre paragraphe </P>
<P class="nom1"> votre paragraphe </P>