Partie css des blogs blogger

Pour répondre à certaines questions récurentes et pour aider les profanes, j'entame une série d'articles sur le décorticage (autant que faire se peu) du code des blogs blogger. .

Dans ce post les CSS, (feuilles de style en cascade)

A partir de votre panneau d'administration, rendez-vous donc à l'onglet Modèle -> modifier le code html.

cliquez sur l'image pour agrandir

Vous avez là, le haut du "code html" (pour les plus pointilleux il ne s'agit pas de html brut, mais de Xhtml). Ne nous attardons pas pour l'instant au tout début du code mais à la parti située après les balise : b:skin.
C'est là que commence réellement la partie css du code, cette partie (css) est la zone de définition de tout l'aspect visuel de votre blog. C'est là que vous spécifiez si le texte sera bleu ou noir, les liens soulligné, le fond de page en image ou non, etc... Cette partie ne comporte quasiment aucune fonction mais touche à tout ce qui est rendu visuel. CSS signifi, Cascading Style Sheet, vous voilà bien avancé hein . C'est à dire Feuille de Style en Cascade, on y définit donc les styles et cascade car on peut insérer plusieurs feuilles de style les unes à la suite des autres qui joueront leur rôle le moment venu. On va retenir que c'est une cascade d'informations relatives au Styles graphique de votre blog (ou page web).
La feuille de style se termine sur les blogs blogger par la balise, /b:skin.(voir image ci dessous).

cliquez sur l'image pour agrandir

Je vais maintenant vous décrire une zone assez représentative du code CSS (la partie encadrée dans l'img ci dessous)

cliquez sur l'image pour agrandir

Voici le code:
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 21%;
word-wrap: break-word; / * fix for long text breaking sidebar float in IE * /
overflow: hidden; / * fix for long non-text content breaking IE sidebar float * /
}

- div#sidebar
div est un élément (conteneur) HTML, c'est en quelques sorte une boîte dans laquelle on peut mettre du texte, des images, etc... Ici il a pour identifiant sidebar (c'est la colonne de côté), l'identifiant permet d'attribuer les styles uniquement à la div ayant id="sidebar" , si on veut affecter les mêmes styles à plusieurs div, on attribuera une classe, ex: div.sidebar. Vous le voyez la différence de notation est entre # (dièse) et . (point). Dans un cas on a un identifiant unique, dans l'autre une classe attribuable à plusieurs éléments identiques.

- margin:20px 0px 0px 0;
Ce sont les valeurs de marge par rapport aux autres éléments HTML proches (voir une explication complémentaire ici: propriété margin css)

- padding:0px;
Il s'agit ici de la marge Intérieure de l'élément (propriété padding css)

- text-align:left;
Le texte contenu dans la div sera aligné à gauche (autres valeurs possible; right, justify, center)

- float: left;
indique que les éléments suivant se caleront à droite de celui ci (la div se retrouvera donc à gauche)

- width: 21%;
La largeur, ici elle "proportionnelle" à l'élément parent. Par exemple si notre div#sidebar est elle même incluse dans une div de 100 px de largeur, div#sidebar fera 21 px.

- word-wrap: break-word; / * fix for long text breaking sidebar float in IE * /
word-wrap indique au navigateur comment il doit se comporter avec les mots qui déborderaient éventuellement du cadre (ici le mot sera coupé, break-word). Mais la partie la plus intéressante de cette ligne est:
/ * fix for long text breaking sidebar float in IE * /
On a ici une ligne de commentaire (nota j'ai rajouté un espace entre / et * pour que les commentaires ne soient pas interprétés), c'est un indication uniquement à l'usage des codeurs. Ces commenatires permettent de s'y retrouver, sans en abuser vous pouvez en mettre quand vous modifiez une ligne, cela vous permettra de comprendre l'utilité de telle ou telle ligne. on y apprend aussi que le codage word-wrap fixe un bug de IE (Internet Explorer) qui cassait surement le template en cas de mot trop long. On voit avec cette astuce du codeur l'obligation de tester ses modifs sur plusieurs navigateurs (Firefox et IE au moins).

- overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
Overflow indique au navigateur comment se comporter si un élément contenu dans la div dépasse du cadre de celle ci. Ici tout ce qui dépasse ne sera pas affiché (hidden=invisible), plusieurs valeur sont possible, dont scroll qui rajoute une barre de défilement en bas de la div.

- }
Enfin l'accolade fermante qui termine obligatoirement la section div#sidebar, vous aurez aussi surement remarqué que toutes les lignes se terminent par un ; (point virgule)

Ben voilà, si certaines explications ne sont pas claires ou même si ce post vous a aidé, à vos comments

Lien complémentaire, wikipédia css