(Blogger) Découvrir le CSS

Si vous venez d'OverBlog, vous serez surpris par le CSS de Blogger. Il comprend aussi de l'HTML et du javascript.

Pour y accéder : Présentation > Modifier le code HTML

Dans la première partie, vous avez la possibilité :

• de sauvegarder votre CSS actuel
• d'uploader un CSS trouvé sur le net. Je vous expliquerai  plus tard comment faire.

Dans la seconde partie, votre CSS.

Vous n'avez pas besoin de cocher Développer des modèles de gadgets dans un premier temps, qui permet d'installer des fonctions telles que Lire la suite ou mes nuages qui volent en entête.

Le CSS commence à partir de

/* Content ----------------------------------------------- */

et finit avant

]]></b:skin>

Sur Blogger, il n'existe pas de mode classique et de mode avancé. Toutes les pages ont le même aspect, mais il est possible de supprimer des parties du blog dans le CSS.


Le CSS sert à effectuer des modifications générales de design : couleurs, background, police, marges, encadrements ... Je vous rappelle quelques termes de base :

Mise en forme de la police

Font-family : Propriété pour choisir la police.
Font-size : Propriété pour le corps (taille de la police).
Font-style : Propriété pour l'italique.
Font-weight : Propriété pour la graisse de la police

Mise en forme du texte

Color : Propriété pour définir la couleur du texte.
Text-decoration : Propriété pour souligner, surligner, barrer, clignoter.

Mise en forme du fond

Background-color : pour la couleur du fond de page (couleur d'arrière-plan).
Background-image : pour placer une image en fond de page ou d'élément (image d'arrière-plan).
Background-repeat-x : propriété pour répétition horizontale d'une image.
Background-repeat-y : propriété pour répétition verticale d'une image.
Background-attachment : pour définir une image fixe lors du défilement de la page.
Background-attachment y : définir si une image reste fixe verticalement lors du défilement de page.
Background-position : pour définir la position d'une image dans la page ou le bloc.

Marge distance entre le cadre et l'extérieur

margin-top : marge supérieure
margin-right : marge de droite
margin-bottom : marge inférieure
margin-left : marge de gauche

Marge distance entre le cadre et l'intérieur

padding : Propriété raccourcie qui spécifie la valeur de la marge interne pour les quatre côtés à la fois.
padding-top : Valeur de la marge supérieure
padding-bottom : Valeur de la marge inférieure
padding-right : Valeur de la marge droite
padding-left : Valeur de la marge gauche

Bordure

border : Raccourci vers les propriétés de bordure
border-top : Valeur de la bordure supérieure
border-right : Valeur de la bordure de droite
border-bottom : Valeur de la bordure inférieure
border-left : Valeur de la bordure de gauche
border-width : Raccourci pour les propriétés d'épaisseur de la bordure
border-top-width : Epaisseur de la bordure supérieure
border-right-width : Epaisseur de la bordure droite
border-bottom-width : Epaisseur de la bordure inférieure
border-left-width : Epaisseur de la bordure gauche
border-style : Raccourci pour les styles de la bordure
border-top-style : Style de la bordure supérieure
border-right-style : Style de la bordure droite
border-bottom-style : Style de la bordure inférieure
border-left-style : Style de la bordure gauche
border-color : Raccourci pour la couleur de la bordure
border-top-color : Couleur de la bordure supérieure
border-right-color : Couleur de la bordure droite
border-bottom-color : Couleur de la bordure inférieure
border-left-color : Couleur de la bordure gauche