Qu´est-ce que le CSS?
Comme mentionné dans l´article sur l´HTML une page web a un certain design ou "style".
Généralement un site est composé de plusieurs pages, qui ont de prime abord toujours le même style du point de vue présentation des pages. Il faudra donc dire à chaque page:
- quel est la couleur d´arrière-plan ou quelle image,
- quelle police est utilisée,
- de quelle taille,
- de quelle couleur,
- et beaucoup plus encore ....
C´est là qu´entre en jeu le CSS ou "Cascading Styling Sheet" (feuille de style en cascade).
Pour essayer de faire simple:
Une feuille de style n´est rien d´autre qu´un fichier contenant toutes les directives nécessaires désignant le style des pages sur votre serveur.
c´est-à-dire que vous saisissez dans ce fichier l´apparence qu´aura votre livre (vous vous rappellez?).
Suite à ça il vous suffit de référencer ce fichier dans vos pages, au lieu de resaisir tout le code. Et vos pages sont toutes "uniformes", ce qui est beaucoup plus agréable à la lecture.
Une petite parenthèse s´impose:
- Essayez de ne pas utiliser plus de 2 différentes polices.
- Evitez d´avoir trop de couleurs différentes.
- Choisissez judicieusement la couleur du texte et celle du fond.
Ci-bas vous trouvez un petit tableau de quelques combinaisons de couleurs polices/arrière-plan.
Dans ce tableau les signes "+", "--" et "il" ont la signification suivante:
- + : la combinaison est bonne; cependant les couleurs claires d´arrière-plan ne sont appropriées que pour les écrans à faible scintillement et sans reflets. Mis à part ce fait, un écran clair consommera beaucoup plus d´énergie qu´un écran sombre. Bien sûr vous allez dire qu´un seul écran ne peut pas changer le monde; et là est le mauvais raisonnement! Imaginez que si uniquement Google se mettait à utiliser un écran noir au lieu de blanc, le cumul épargnerait environs 750 MegaWatt/heures par mois; et ça ce n´est pas rien!
- -- : combinaison inappropriée; soit les couleurs sont trop semblables ou des lignes minces ne seront pas visibles ou alors l'effort de focalisation de la part des yeux est trop important.
- il : illisible, c´est-à-dire que les deux couleurs sont identiques.
arrière-plan | premier plan (texte) | ||||||||
noir | blanc | magenta | bleu | cyan | vert | jaune | rouge | ||
noir | il | + | + | -- | + | + | + | -- | |
blanc | + | il | + | + | -- | -- | -- | + | |
magenta | + | + | il | -- | -- | -- | -- | -- | |
bleu | -- | + | -- | il | + | -- | + | -- | |
cyan | + | -- | -- | + | il | -- | -- | -- | |
vert | + | -- | -- | + | -- | il | -- | -- | |
jaune | + | -- | + | + | -- | -- | il | + | |
rouge | -- | + | -- | -- | -- | -- | + | il |
Petite remarque personelle: Choisissez judicieusement vos couleurs de fond! Sachez que plus la couleur est claire, plus la consomation de l´écran sera importante. Vous allez dire que cela ne peut pas avoir beaucoup d´importance, mais imaginez tout simplement que si Google par exemple présentait un fond d´écran noir ou foncé au lieu de blanc, l´énergie économisée suffirait à alimenter une ville comme Bordeaux toute une journée.