C'est bien joli de pouvoir écrire (déjà !) une règle de style, vous l'avez peut-être essayé après avoir lu les 3 premiers exposés ... mais ça ne marche pas ! Sans doute parce que vous ne l'avez pas déclarée dans les ... règles !
Voyons donc comment faire. La plus rapide (celle qui, à coup sûr, fera "marcher" immédiatement vos premiers essais) est celle qui consiste à l'intégrer purement et simplement dans vos balises, c'est-à-dire "à l'intérieur" des selecteurs. La syntaxe en sera toutefois un peu différente car elle ne nécessite pas l'utilisation des accolades ... ni du sélecteur puisque vous êtes "dedans" !
Voici dès lors la manière de la déclarer :
<BALISE style="propriété1: valeur; propriété2: valeur; propriété3: valeur">
contenu</BALISE>
Retournez donc dans l'exposé "Syntaxe de base et sélecteurs" et faites un clic droit avec la souris : cette page en est truffée ! Essayez ces même règles sur une de vos pages, modifiez-en les valeurs : c'est un bon apprentissage !
La seconde possibilité de déclarer une règle de style consiste à l'écrire à l'intérieur de la page concernée. Dans ce cas, elle devra impérativement être insérée dans les balises de tête < HEAD >. Elle devra dès lors être, elle aussi, encadrée de ses propres balises. Voici comment :
C'est la méthode la plus courante mais elle n'agira naturellement que dans l'affichage de la page dans laquelle elle est déclarée. Si vous désirez obtenir les mêmes effets dans d'autres pages, il faudra systématiquement reproduire cette feuille de style dans chacune d'entre-elles ... et par conséquent alourdir inutilement celles-ci. Cette méthode n'est donc intéressante que pour déclarer des règles de style spécifiques à la page dans laquelle elle est écrite. Dans le cas contraire, si vous désirez utiliser les mêmes styles pour plusieurs pages (nous en revenons là à ce que je vous disais dans le premier exposé à propos de la charte graphique), la méthode d'écriture sera très simple. Au moyen de votre éditeur de texte préféré, vous taperez de vos petits doigts agiles, par exemple :
M A I S .....
Il faudra enregistrer cette feuille de style non pas au format HTML mais en lui donnant
l'extension .css. Cela ne pose évidemment aucun problème avec le bloc-notes ou n'importe
quel autre petit éditeur de texte. Une fois enregistrée, vous placerez votre feuille de style dans le même
dossier que vos pages, de préférence : faites dans la simplicité, au moins au début, afin d'éviter des
erreurs de liens internes.
A l'intérieur de celles-ci vous insérerez le lien suivant, entre les balises < HEAD
> :
Dès lors, chaque page comportant ce lien sera soumise à cette FDS, pour autant , évidemment, que vous n'oubliiez pas d'inclure les identifiants (identités, qu'elles soient "class" ou "id") éventuels aux balises concernées.
Vous suivez ? Vous vous sentez d'attaque ? Alors, nous allons pouvoir aborder la pièce de résistance : les
familles de propriétés ... et il y en a un sacré paquet ! Allons-y toutefois doucement ... mais sûrement
:
Je me limiterai à vous en présenter les principales (arrêtées à CSS2), celles que vous pourrez très
rapidement mettre en oeuvre. Retournez donc au sommaire de cette rubrique pour continuer votre ascension vers
le nirvana du concepteur : le site parfait !
... on peut rêver, n'est-ce pas ...