(OverBlog) Découvrir le CSS

Le CSS sert à effectuer des modifications générales de design : couleurs, background, police, marges, encadrements ...

Pour accèder au CSS : Design  > Mode CSS.

Si vous êtes en mode classique, vous avez un seul CSS et les modifications, que vous y ferez, agiront sur tout le blog.
Si vous avez choisi de passer en mode avancé, vous avez 3 CSS à disposition :

• Accueil
• Articles
• Pages

Les modifications n'agiront que sur la zone concernée.

La première fois que vous effectuez une modification dans le CSS, vous devez cliquer sur Mon style, puis cocher Aplliquer ma feuille de style personnalisée et, enfin, enregistrer.

Important : contrairement à d'autres plateformes (tels que Blogger) les CSS OverBlog ne contiennent que du CSS, ni HTML, ni javascript

Bon à retenir :  

• Une modification effectuée en HTML prend toujours le pas sur une modification effectuée dans le CSS
• Les lignes situées le plus bas dans le CSS prennent le pas sur les lignes plus hautes.

Voici quelques termes utilisés couramment en CSS :

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

Pensez à ordonner votre CSS, pour vous y retouver plus facilement ensuite.

Les données concernant l'ensemble du blog doivent être placées en haut et plus elles deviennent précises se situer vers le bas.
Lorsque vous rajoutez des lignes concernant une partie précise du blog, pensez à leur mettre un titre sous cette forme :

/* ------------------------ Module Newsletter ---------------------------- */

Vous ne modifiez seulement ce qui est en rouge.