Modifier les CSS dans l'outil de création de modèles

L'outil de création de modèles de Blogger vous permet de personnaliser pratiquement tous les aspects de l'apparence de votre blog grâce aux feuilles de style en cascade (CSS, cascading style sheets).

Pour ajouter des extraits CSS personnalisés à votre modèle, accédez à l'onglet Modèle et cliquez sur Personnaliser.

Ajoutez ensuite votre code dans le champ situé dans l'onglet Avancé | Ajouter le fichier CSS. Les modifications que vous réalisez apparaissent instantanément dans l'aperçu situé sous l'éditeur.

Remarque :

En modifiant les fichiers CSS, vous pouvez changer l'apparence et l'atmosphère de votre blog. Pour modifier le contenu proprement dit de votre blog et notamment ajouter des gadgets ou changer la mise en page, cliquez sur Modifier le code HTML situé dans l'onglet Modèle.

N'oubliez pas que, tout comme les autres personnalisations, vos fichiers CSS sont supprimés si vous modifiez la conception de votre blog.

Vous pouvez modifier la quasi-totalité des éléments de votre blog en modifiant simplement la feuille de style de votre modèle. Certaines des opérations les plus courantes sont décrites ci-dessous.

Dans nos modèles par défaut, toutes les informations concernant le code CSS se trouvent au début, entre les balises <style></style>.

Elles se présentent sous la forme d'une série de lignes telles que celles-ci :



La ligne sélectionnée indique le style appliqué à chaque balise <h3> dans le blog. Nous allons voir comment utiliser certaines options de style. Tous les extraits de code ci-dessous peuvent être insérés entre des {accolades} dans la feuille de style.

Code	Exemples
Couleurs
color:blue;	Ce texte est en bleu.
background:yellow;	Ce texte est associé à un fond jaune.
Vous pouvez indiquer un grand nombre des couleurs courantes (par exemple le rouge, le vert ou le jaune), ou entrer le code hexadécimal pour avoir accès à une plus large palette de couleurs (#0033AA, par exemple). Pour plus d'informations sur les couleurs, consultez la page Référence des couleurs Web.
colspan="2">Bordures
border:solid 1px red;	Ce texte est entouré d'une bordure rouge.
Une bordure peut se présenter sous la forme d'une ligne continue, d'une série de points ou d'une série de tirets. La largeur est indiquée en pixels (px). La couleur peut être indiquée directement ou à l'aide d'un code hexadécimal. Pour ajouter une bordure sur un seul côté, utilisez l'instruction border-top, border-bottom, border-right ou border-left.
Polices
font-family:"Times New Roman",Serif;	Ces caractères sont ceux d'une police Serif.
font-family:Verdana,Sans-Serif;	Ces caractères sont ceux d'une police Sans-Serif.
Vous pouvez entrer une liste de polices. Si la première police n'est pas disponible sur l'ordinateur de l'internaute, c'est la deuxième qui est utilisée, et ainsi de suite avec les autres polices désignées. Si vous indiquez "Serif", la première police Serif disponible est utilisée.
font-size:24px;	Ces caractères ont une taille de 24 pixels.
L'unité de mesure de la taille peut être le pixel (px), le point (pt), le pouce (in) ou un pourcentage de la taille par défaut (%).
font-weight:bold;	Ce texte est en gras.
Vous avez le choix entre le style Gras (bold) et le style Normal.
text-decoration:underline;	Ce texte est souligné.
Les options de mise en valeur du texte sont les suivantes : Aucune (none), Souligné (underline), Ligne au-dessus (overline) ou Barré (line-through). Elles s'emploient le plus souvent pour supprimer le soulignement des liens.
text-align:right;	Ce texte est aligné à droite.
Un texte peut être aligné à gauche (left) ou à droite (right), ou être justifié (justify).
Marges intérieures et extérieures
margin:15px;	Ce texte est associé à une marge extérieure de 15 pixels sur tous les côtés.
padding:15px;	Ce texte est associé à une marge intérieure de 15 pixels sur tous les côtés.
Les deux types de marge désignent un espacement par rapport à un autre élément. La marge extérieure fait référence à l'espace situé à l'extérieur de la bordure, tandis que la marge intérieure correspond à l'espace à l'intérieur. (La bordure a été ajoutée uniquement à titre d'exemple.) Comme pour l'instruction "border", vous pouvez indiquer un seul côté à la fois en entrant margin-left, padding-top, etc. Vous pouvez également définir toutes les marges à la fois en entrant margin:1px 2px 3px 4px;. Dans ce cas, l'ordre est le suivant : marge supérieure, droite, inférieure et gauche.

Remarques :

Vous pouvez également mettre en forme une partie seulement du texte d'un article.

Voici le format à utiliser :

<span style="color:red;">Ce texte s'affiche en rouge.</span>