Les feuilles de styles - Cours HTML

Insertion d'une feuille de styles

Info

Une feuille de style s'insère grâce à la balise <STYLE>
Nous l'écrirons :
Exemple de code :
<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 :
Exemple de code :
<P STYLE="vos propriétés">

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 :
Exemple de code :
ADDRESS { text-decoration:underline; }
Le code HTML sera :
Exemple de code :
<ADDRESS> </ADDRESS>
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 :
Exemple de code :
#nom { text-decoration:underline; }
Le code HTML sera :
Exemple de code :
<ADDRESS ID="nom"> </ADDRESS>

Cette technique est intéressante, puis qu'elle permet d'assigner le soulignement à toutes les balises ayant comme ID "nom" ou plutôt à la balise ayant comme ID "nom" car la valeur de ID des unique.

Class

Avec CLASS :
Nous mettrons dans la feuille de style :
Exemple de code :
.nom { text-decoration:underline; }
Le code HTML sera :
Exemple de code :
<ADDRESS class="nom"> </ADDRESS>

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 :
Exemple de code :
P { font-size:12px }
Puis créer deux sous classes pour les deux autres paragraphes :
Exemple de code :
P.nom { color:green; }
P.nom1 { text-decoration:underline; }

Votre code HTML sera :
Exemple de code :
<P> votre paragraphe </P>
<P class="nom"> votre paragraphe </P>
<P class="nom1"> votre paragraphe </P>

Toutes les propriétés

Infos

Voici le récapitulatif des propriétés de styles (css).
Voici le les cours .
Chapitre les cadres
Chapitre les formulaires