Les styles CSS dans Blogger

Utiliser les feuilles de style dans Blogger

Je suis particulièrement flemmard quand il s'agit de soigner la mise en page d'un article. C'est un peu pour cela que j'ai eu envie d'écrire ce petit article (pour débutants) sur l'utilisation des feuilles de style dans Blogger. Il existe deux solutions : soit vous utilisez une définition spécifique soit vous créez (ou modifiez) une des déclarations visibles dans le Template utilisé pour votre Blog.

Les définitions spécifiques ("style à la volée") :
<p style=" font-size: 14pt ;">Le texte sera de la taille de police définie.</p>

Il suffit alors de cliquer sur l'onglet Modifier le code HTML et de changer directement le code HTML qui est visible.
Vous pouvez aussi utiliser la méthode externe et définir une nouvelle propriété de style dans le modèle de Blogger :

h2 {font-weight:bold; line-height:1em; font-size:24px;}

Le code HTML à ajouter dans votre article sera alors celui-ci :

<h2>Un titre de niveau 2</h2>

L'avantage est que nous pouvons utiliser des titres de niveau 2 tout en définissant la taille de la police et l'interlignage (et ce afin d'éviter les effets de chevauchements quand le titre occupe plus d'une ligne). Le principe est donc le suivant :
À partir du Tableau de bord Blogger, cliquez sur le lien Mise en page. Cliquez ensuite sur le lien Modifier le code HTML et cochez la case Développer des modèles de gadget.
À la suite du commentaire <b:skin><![CDATA[, vous allez voir les différentes déclarations de style. Il vous suffit d'ajouter vos propres déclarations puis de cliquer sur les boutons Aperçu et Enregistrer le modèle. Éditez ensuite le code HTML de votre article et procédez aux modifications nécessaires.
Il est plus simple d'avoir une vue complète des styles CSS employés en affichant le code source d'une page de votre blog. Les déclarations sont toutes visibles après cette ligne de code : <style id='page-skin-1' type='text/css'><!--

Les classes :
Soit la classe universelle appelée "image" qui va nous servir à positionner une image dans du texte (et qui sera ajoutée dans le Template de Blogger) :

.image-left {
float: left ;
}

L'appel vers cette classe dans le code HTML de notre article se fera de la façon suivante :
<img class="image-left" src="..." alt="" />

On pourrait aussi utiliser la méthode "à la volée" :

<p><img src="image.gif" style="float:left">Le texte de notre paragraphe .</p>

Il vous est possible de créer toutes sortes de classe personnalisée… Elle doit être précédée d'un point. Vous pouvez utiliser des caractères accentués, des chiffres et des tirets.

Les pseudo-classes :

Elles permettent de préciser le style qui sera appliqué à certaines balises. Leur nom est prédéfini et vous ne pouvez pas créer vos propres pseudo-classes. En voici un exemple visible dans le Template de Blogger :

a:hover{color:#800000;}

Les éléments qui composent cette déclaration sont les suivants :

• A : sélecteur ;
• Hover : nom de la pseudo-classe ;
• Color : propriété ;
• #800000 : valeur.

Bon, vous l'aurez compris, le principe de fonctionnement est très simple et cela vous permet de personnaliser complètement n'importe quel Template Blogger en utilisant vos propres déclarations de style. Par ailleurs, c'est la seule manière de palier aux nombreux bugs et imperfections de mise en page qui font un des charmes de Blogger.