Personnaliser son blog avec le CSS

La personnalisation d’un blog est quelque chose d’important pour les blogueur(se)s. Malgré le nombre élevé et la diversité des thèmes disponibles dans l’espace d’administration d’un blog WordPress, la plupart des blogueurs se retrouvent encore confrontés au problème de la limitation des options de personnalisation qu’offrent ces différents thèmes. En utilisant les feuilles de style ou CSS (Cascading Style Sheets), il devient tout à fait possible de rendre son blog unique.

  • Qu’est-ce que le CSS ?

Le CSS est un langage qui, combiné avec le HTML (le langage qui sert à créer les sites internet), permet de mettre en forme un site. En un mot, c’est grâce au CSS qu’on peut mettre un texte en gras, en italique, le souligner. Avec le CSS on peut également augmenter la taille du texte, lui attribuer une couleur, etc. C’est dire si la marge d’action est grande avec le CSS.

  • Comment ça marche ?

Le CSS, comme on l’a dit plus haut, fonctionne avec le HTML. Le langage HTML est composé de balises qui permettent d’identifier les éléments qui apparaissent sur une page. Une balise se reconnait par les chevrons qui l’entourent. Par exemple, pour créer un nouveau paragraphe, on utilise la balise <p>

Il existe donc différentes balises pour identifier chaque élément qui apparait sur une page internet. Voici d’autres exemples de balises : <a> pour insérer un lien, <blocquote> pour insérer un bloc de citation, <img> pour les images etc.

Le CSS se sert donc de ces différentes balises pour mettre en forme le texte. Pour attribuer des propriétés à un élément présent dans une page internet, il suffit de sélectionner l’élément, d’indiquer la propriété et de lui donner une valeur. C’est trop compliqué ? Je crois qu’un exemple pratique est nécessaire pour éclaircir les choses.

Pour changer le couleur des liens dans un blog en rouge, il suffit d’indiquer dans le CSS a { color : red ; }

En faisant attention, on verra que a représente la lettre de la balise utilisée pour insérer des liens (sans les chevrons). Ensuite, le mot-clé color (on appelle ça dans le jargon une propriété) représente la couleur, et red c’est la valeur qu’on donne à la propriété.

  • Où insérer le code CSS ?

Pour appliquer notre CSS à notre blog, il faut l’ajouter dans l’espace d’administration. Un menu est prévu à cet effet. Pour retrouver ce menu, il suffit d’aller à Apparence, puis sélectionner le dernier menu : Custom CSS Manager. Un champ de texte s’affiche. C’est là que notre code sera ajouté. On pourra donc, pour faire des tests, ajouter du code et cliquer sur le bouton « Enregistrer les modifications », puis ouvrir ou actualiser le blog pour voir les changements.

Tuto CSS - Custom CSS Manager

L’avantage c’est que si nos modifications ne nous conviennent pas, il suffit de vider le champ de texte et d’enregistrer les modifications pour revenir à notre ancienne configuration. C’est donc sans danger, n’hésitez pas à faire des tests.

  • Balises, propriétés et valeurs en CSS

Le CSS est un langage très vaste, et toutes ses spécificités ne peuvent pas être étudiées dans un seul tutoriel. Cependant, avant de terminer cette première partie, nous allons étudier les balises les plus récurrentes dans un blog, avec certaines des propriétés qu’elles acceptent, et quelques valeurs possibles.

  • Balises

Dans nos blogs, les balises qu’on retrouve presque inévitablement sont les suivantes :

<body> La balise body contient tout le contenu de notre blog. On peut l’utiliser pour définir la couleur d’arrière-plan, la police par défaut, la taille par défaut du texte, la couleur etc.

<hl> Cette balise s’emploie pour les titres des billets.

<p> La balise p permet de définir les paragraphes dans les billets. Chaque fois qu’on appuie sur la touche « Entrée », on crée une balise p.

<a> La balise a est employée pour insérer les liens dans nos billets.

<img> img s’emploie pour ajouter des images dans nos billets ou partout ailleurs dans le blog

<blocquote> Chaque fois qu’un bloc de citation est créé dans le blog, c’est cette balise qui est utilisée.

 

  • Propriétés et valeurs

Les balises citées plus haut ont presque toutes les mêmes propriétés. Pour chacune, on aura ainsi les propriétés suivantes :

font-size – pour définir la taille du texte. La taille se donne en pixels (px) de préférence*.

font-weight – pour définir épaisseur du texte. Il suffit de mettre ‘bold’ pour avoir du gras, et ‘normal’ pour avoir un texte normal.

color – pour définir la couleur du texte. La couleur peut être écrite en anglais (red, blue, green, black, yellow etc), ou indiquée par un code hexadécimal – on en parlera dans un prochain tutoriel.

background-color – pour définir la couleur d’arrière-plan.

border – pour définir la bordure de l’élément. L’épaisseur de la bordure se donne en pixels de préférence*. Ensuite on doit indiquer sa texture (solid, dotted, dashed etc) et sa couleur.

border-radius : pour arrondir les bords d’un élément. Le border-radius se donne en pixels (px).

width – pour définir la largeur d’un élément. La largeur peut se donner en pixels (px) ou en pourcentage (%).

height – pour définir la hauteur d’un élément. La hauteur peut se donner en pixels (px) ou en pourcentage (%).

  • Cas pratiques
  1. Voici un exemple de CSS pour personnaliser les citations dans les billets :
blockquote { font-size: 15px; border: 1px solid gray; border-radius:8px; background: silver; color: black; }

Ce code devrait** donner à vos blocs de citation une bordure grise aux bords arrondis, avec un arrière-plan argenté et du texte noir de 15 pixels.Tuto CSS - Illustration (Bloc de citation)

2.   Autre exemple, un code CSS pour personnaliser les titres des billets :

h1 { background-color: black; color: white; text-align: center; }

Ce code devrait** ajouter un arrière-plan noir aux titres de vos billets, les aligner au milieu et donner au texte la couleur blanche.

Tuto CSS 1 - llustration (Titre)

3. Dernier exemple, un code CSS pour personnaliser les paragraphes :

p { text-align: right; font-weight: bold; color: blue; }

Ce code devrait** aligner vos paragraphes à droite, avec du texte gras et de couleur bleue.

Tuto CSS 1 - llustration (Paragraphe)

Surtout faites le maximum de tests, laissez libre cours à votre imagination. Le CSS ne présente aucun danger pour votre blog, et si l’affichage ne vous convient pas, n’oubliez pas qu’il suffit de vider la zone de texte et d’enregistrer les modifications. Bon codage ^^

_____

* Il existe plusieurs autres unités de mesure en CSS : le pourcentage %, le centimètre (cm), le point (pt), le em, etc. Cependant les plus conseillés sont le pixel et le em. Voici un lien vers une liste plus fournie d’unités de mesures utilisables en CSS : http://www.css-faciles.com/unites-css.php

** Il est possible que certaines des propriétés que vous allez attribuer à vos éléments ne soient pas appliqués. Ne paniquez pas, c’est un problème qui sera abordé dans d’autres tutoriaux.

3 Commentaires

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *