<HTML>
<HEAD>
<STYLE type="text/css">
BALISE1 {propriété : Valeur; ...}
BALISE2 {propriété : Valeur; ...}
</STYLE>
</HEAD>
<BODY>
A l'intérieur des marqueurs <BODY>
Cette façon de définir les feuilles de style est peu courante, et peu conforme au but des feuilles de style. Cela peut néanmoins servir pour définir une exception.
<HTML>
<BODY>
<BALISE STYLE="propriété: Valeur; propriété : Valeur"> mot à modifier </BALISE>
</BODY>
</HTML>
A l'extérieur du document (dans un fichier)
Le fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document est un "plus", car on peut, en modifiant le fichier contenant les feuilles de style, changer l'allure de toutes les pages web s'y reférant.
Il faut d'abord créer un fichier texte contenant les feuilles de style et dont l'extension est
.css par exemple
style.css.
Puis créer le raccourci vers cette page dans la(les) page(s) web:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
La balise
<LINK> avertit le navigateur qu'il doit établir un lien.
"rel=stylesheet" précise qu'il s'agit d'une
feuille externe.
type="text/css" avertit une fois de plus qu'il s'agit de
feuilles de style en cascade
href=" ... " définit
l'emplacement de la feuille de style.
Les classes et les ID
Les classes
Il peut s'avérer intéressant d'affecter des styles différents à des balises. Pour cela on a introduit le concept de
classe.
La définition des classes est aussi simple que celles des styles:
.classe {propriété de style: Valeur; propriété de style: Valeur ...}
Où
"classe" représente le nom que vous donnez à la classe.
Remarquez
le point avant le nom de la classe!
Pour appeler cette classe il suffit de rajouter un attribut à la balise:
<BALISE class="nom_de_la_classe"> mot à modifier </BALISE>
Créons par exemple la classe
"tire":
.titre {font-type: arial; font-color: red; font-weight: bold}
Les ID
Les ID servent à
remplacer les classes lorsqu'il y a du JavaScript dans la page, car le JavaScript emploie lui aussi la syntaxe
nom.nom (nom-point-nom).
La syntaxe est alors:
#nom_ID { propriété de style: Valeur; propriété de style: Valeur ...}
On l'appelera de la manière suivante:
<BALISE ID="#nom_ID" > mot à modifier </BALISE>
On ne peut faire appel qu'à un seul même ID par page!
Les balises <SPAN> et <DIV>
Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises
<SPAN> et <DIV>.
Le marqueur <SPAN>
La balise
<SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec
ID qu'avec
CLASS.
Sa syntaxe est la suivante:
<SPAN class=important> Texte </SPAN>
Le marqueur <DIV>
L'idée est la même pour la balise DIV, cependant au lieu de s'appliquer à quelques mots dans un paragraphe, elle s'applique sur plusieurs paragraphes.
Sa syntaxe est la suivante:
<div class=code><DIV class=important> paragraphes </DIV>
Dans la balise <BODY> Définir un style
