Article complètement en retard de TetraDavid, en complément de l'article de Keul.
Pour ceux qui savent ce que signifie h2{color:gray;}, la lecture de ce billet vous sera totalement inutile.


Après le billet de Keul, vous vous décidez à entrer dans le monde moderne et avoir votre propre page ouaib. Vous créez et modifiez une page .html, y insérant quelques balises, et débutez ainsi votre site (qui vous n'en doutez pas fédèrera l'ensemble du web français dans son domaine d'ici quelques temps). Les plus pointilleux d'entre-vous (le terme masochiste fonctionne aussi) ajouteront un doctype et tout le nécessaire pour que la page soit valide.

À ce stade, il y fort à parier que les néophytes aient une réaction du type "c'est moche. Ce cadre là, il serait bien écrit en rouge... " L'ajout de style résout le problème ! Un <p style="color:red"> met le paragraphe en rouge :)

( une autre "solution", suffisamment moche pour justifier le NSFW, serait de mettre le texte en rouge sur une image...et de mettre l'image. FORTEMENT DÉCONSEILLÉ !)


OUI MAIS si je veux avoir tous mes paragraphes en rouge ? Il faudrait alors ajouter le style="color:red" partout... et en cas de changement de look ? find/replace sur l'ensemble du site....
La solution ? les CSS pardi ! (c'est pas vraiment une surprise, vu le titre du billet)

Voici le principe d'un fichier CSS (qui ont généralement une extension... .css) :
Définir tout le style dans un fichier annexe, pour pouvoir relooker et travailler facilement le style du site.

Exemple :
p { color:red; }
Cette ligne, à mettre dans le css (css à appeler dans le html :D ), permet de mettre tous les paragraphes de votre site (plus précisément, toutes les pages qui appelleront le fichier CSS) en rouge. Du vert plutôt ? remplacer red par green, et le tour est joué.

Plus compliqué : le site possède des paragraphes A à mettre en fond rouge, et des paragraphes B, à mettre en fond rose.
Il suffit, dans le html, de transformer le code pour les paragraphes A : <p>blabla</p> en <p class="paragrapheA">blabla</p>
Dans le css, il faut dire .paragrapheA { background-color:red} (notez bien le point devant le nom de la classe)
Idem pour .paragrapheB et background-color:pink
Recharger la page, c'est fini :)


Il existe de nombreuses possibilités en CSS, pour la police de caractères, les bordures, les couleurs, les positions des cadres, etc. (la version 3 de CSS devrait ajouter quelques petites choses intéressantes quand elle sortira)
Je ne détaillerai pas tout ici (ce n'est pas mon but, et je n'aurai pas assez de temps pour tout présenter), des tutos existent, ainsi que des sites listant toutes les possibilités en css.

En tout cas,
Joyeux Noël au raton ainsi qu'à tous les lecteurs !