Un blog à mes couleurs, on refait les murs

vendredi 30 mars 2012, par ID

Pas de panique c’est possible sans parler le Cascading Style Sheets (CSS) ou feuilles de style en cascade en français, on apprendra en cours de route. En fait ce memento va vous donner les rudiments du langage, ensuite, vous pourrez toujours approfondir vos connaissances par exemple en allant sur le site Alsacreations.

 Le procédé

Avec l’éditeur de texte, on ouvre la feuille style.css de notre thème dans le dossier qu’on a crééprécédemment d’une part, d’autre part, on ouvre le blog dans le navigateur. En local, on démarre Wampserver, ou son équivalent pour Linux ou Max, on ouvre localhost et le dossier au nom du site (par exemple wordpress parce qu’on a eu la flemme de trouver un autre nom).

On va travailler sur la feuille de style avec et dans l’éditeur de texte et on rafraichira à chaque fois la page dans le navigateur pour vérifier ce qu’on est en train de faire.

On peut avoir besoin d’un outil qui donne les numéros hexadécimaux des couleurs, je suggère la Boîte à couleurs, qui n’existe que pour Windows et n’est malheureusement plus maintenu semble-t-il mais fonctionne toujours. On peut aussi télécharger l’extension colorzilla pour Firefox, voire, mieux, utiliser le logiciel de traitement d’image Gimp ou le logiciel de dessin vectoriel Inkscape [1].

 La syntaxe

Un langage informatique doit suivre rigoureusement une syntaxe (a contrario des langages humains) pour être interprété correctement par les ordinateurs.

Le titre de l’élément est suivi d’une accolade ouvrante, qui se ferme après les spécifications de l’élément. S’il y a plusieurs indications, chacune s’écrit avec son nom, deux points, la spécification et terminé par un point virgule.

Par exemple :

Pour décrire la couleur du fond et celle du texte :

On indique les éléments des polices entre guillemets quand elles comportent plus d’un mot, une virgule et un espace entre chaque fonte :

 Les éléments que l’on peut modifier sans tout casser

 La couleur

Il est conseillé d’indiquer la valeur hexadécimale plutôt que les valeurs RVB (ou RGB), car cela donne un code plus léger.

  • du texte → color : #123456 ; [2] ;
  • du fond → background-color ;
  • des bordures → border-color ;

Sur un clavier de PC, le dièse s’obtient par la combinaison des touches :

Touches de clavier
Alt Gr + #

 Le texte

Dans un premier temps, je conseille de ne pas toucher à sa taille (font-size), mais plutôt, si cela se justifie (titres, liens etc.) jouer plutôt son épaisseur ou sur la décoration :

  • taille → font-size : 0.9em ;
  • épaisseur → font-weight : bold ;
  • la décoration → text-decoration : none (ou underline…) ;
  • la transformation du texte → text-transform : none (ou capitalize ou uppercase ou lowercase) ;
  • underline pour un texte souligné ou none si on ne veut pas qu’il le soit automatiquement (important pour les liens) ;
  • text-transform permet qu’un texte s’affiche automatiquement avec les initiales en majuscules (capitalize, surtout intéressant pour les titres en typographie anglaise, mais pas en typographie française), tout en majuscules (uppercase) ou tout en minuscules (lowercase).

 Les titres

Un titre, ce n’est pas une mise en forme, mais avant tout, une balise qui permet au CMS, quand c’est prévu, d’ajouter des ancres (ou liens internes au texte), voire un sommaire comme ici. Ils sont aussi importants en matière de référencement et sont hiérarchisés, donc de 1 à 9. Mais on se limitera à 4 voire 5 (au maximum) dans un article, ce qui donne déjà une structure du texte assez complexe.

Il ne doit y avoir qu’un seul titre h1 par article, logiquement, c’est celui de l’article : h1, h2, h3, h4, h5, h6.

 Les liens

On peut décider qu’ils ont tous la même allure ou non :

  • a active : → paramétrages des liens activés ;
  • a hover : → effet lorsqu’on passe la souris sur le lien ;
  • a visited : → allure des liens non encore visités par l’internaute ;
  • a link : → aspect des liens lorsque le visiteur a cliqué dessus.

 Les bordures

  • border

Indiquer l’épaisseur de la bordure (en px), sa couleur et son emplacement : top, right, bottom, left, soit haut, droite, bas et gauche. On peut ainsi décider de tout encadrer, ou de ne mettre qu’un filet par exemple entre deux colonnes pour les délimiter.

Amusez-vous bien.


[1Au bout d’un certain temps, on finit par avoir vraiment besoin des deux, le premier pour le travail sur les images, le deuxième pour la création des icônes des bannières etc.

[2Accessoirement, cette valeur-ci, donnée au hasard, est un bleu foncé avec une touche de noir