Qu'est-ce que le CSS?
Littéralement Feuille de Style en Cascade (Cascading StyleSheet), le CSS, permet de décrire la présentation d'une page sur Internet. Il permet de centraliser toute la mise en forme et donc d'avoir une mise en page cohérente.
Le principe d'une feuille de style est d'associer une mise en page précise à certains éléments structurants (balises) de vos pages.
Comment accèder à mon CSS?
Pour personnaliser votre CSS, vous devez être en mode avancé (Onglet "Accueil" > sélectionnez à droite "Mode avancé"). Pour en savoir plus .
Dans l'onglet "Design" sélectionnez le lien "Modifier le CSS" dans la boîte "Sous-menu" à droite de la page. Vous accèdez ainsi à la feuille de style de votre blog. Pour pouvoir y enregistrer des modifications, vous devez cocher la case "Je souhaite modifier moi même le fichier CSS".
Avant toute modification, il est conseillé de copier votre CSS. Pour cela, faite Ctrl + A (sélectionner tout) puis Ctrl + C (Copier) et coller le Ctrl + V dans un fichier texte (Bloc-notes, Wordpad ou tout autre traitement de texte)
En procédant de la sorte, vous aurez toujours la possibilité de revenir en arrière en faisant la démarche inverse.
Comment écrire dans votre feuille de style?
Une ligne de CSS (ou règle) se décompose en 2 parties:
- Les sélecteurs, qui décident à quels éléments le style s'applique
- Les déclarations, entre accolades, qui indiquent l'apparence que ces éléments doivent prendre.
Les sélecteurs sont au nombre de 3:
- Les éléments simple:
body,h2,aque vous retrouvez dans votre page HTML sous la forme<body>,<h2>et<a>, - Les classes, commençant par un "
." (point):.box,.article,.Dateque vous retrouvez dans votre page HTML sous la forme<div class="box">,<div class="article">et<div class="Date"> - Les identifiants, commençant par un "
#" (dièse):#top,#footer,#articleAccueilque vous retrouvez dans votre page HTML sous la forme<div id="top">,<div id="footer">et<div id="articleAccueil">
Il est possible de mettre plusieus sélecteurs par règle en les séparant par une "," (virgule). La règle s'appliquera alors à tous les sélecteurs:
#Article1, #Article2 {background: #fff;}
Les identifiants Article1 et Article2 auront tous deux un fond blanc.
Les déclarations sont toujours de la forme propriété: valeur(s) séparés par un ";" (point virgule) et compris entre des accolades:
body {color: #000; text-decoration: none; font-weight: bold}
Vous trouverez ici une liste exhaustive des propriétés CSS.
Vous pouvez aussi ajouter des commentaires dans votre feuille de style en l'encadrant par "/*" et "*/"
/* Ceci est un commentaire */
S'y retrouver dans la feuille de style
Votre feuille de style est structuré en différentes zone afin de mieux repérer les règles que vous voulez modifier. Ces zones sont identifiables par un commentaire de ce genre:
/* --- Elements Principaux --- */
Vous trouverez ci-dessous une présentation de chacune de ces zones:
Elements principauxCette zone régi l'aspect des éléments principaux de votre blog. La police, le fond, les liens, les puces, les images, les titres et les boutons. Si un éléments n'a pas d'autre style imposé dans le CSS, c'est d'ici qu'il héritera son style.StructureCette zone régi la mise en page, l'architecture de votre blog. C'est ici que vous choisissez la taille et l'apparence des colonnes, de l'entête et du pied de page.BoxCette zone régi l'aspect des modulesRechercheNe pas en tenir compte, ces règles ne sont plus appelés par votre blog.ArticlesCette zone régi l'aspect de vos articles. C'est aussi ici que vous trouverez les règles pour modifier l'aspect de la date, le pied d'article (commentaire, trackbacks...) et les styles personnels de la barre d'outils de l'éditeur d'article.CommentairesCette zone correspond à l'aspect des commentaires laissés par vos visiteurs ainsi que l'aspect du formulaire de saisie du commentaire.TrackbacksCette zone correspond à l'aspect des trackbacks fait par vos visiteurs ainsi que l'aspect du formulaire de saisie de trackback.RecommanderCette zone correspond au style du formulaire pour recommander votre blog.NewsletterCette zone régi l'apparence du formulaire d'inscription à votre newsletter.CalendrierCette zone permet de donner une apparence précise au calendrier.Accueil albumCette zone représente les règles régissants l'accueil de vos album photo.Album photoCette zone définit l'apprence de l'album photo.
À vous de jouer (exemples de modifications courantes)
Vous trouverez ci-dessous les modifications les plus souvent demandées et réalisés par les blogeurs. Pour faciliter la lecture, dans les exemples, seule la déclaration à modifier ou à rajouter est indiquée, vous ne devez pas supprimer les autres déclarations existantes pour ce sélecteur. En rouge, mettre vos valeurs personnalisées.
Ajout d'un fond d'écran répété
body {background: #couleur url(http://url_de_l'image.jpg); }
Ajout d'un fond d'écran fixe non répété
body {background: #couleur url(http://url_de_l'image.jpg) no-repeat center fixed; }
Ascenseur vertical (Uniquement Internet Explorer)
html {
scollbar-face-color:#F9F8FA;
scrollbar-highlight-color:#F9F8FA;
scrollbar-3dlight-color:#bbb;
scrollbar-darkshadow-color:#808080;
scrollbar-shadow-color:#000;
scrollbar-arrow-color:#000;
scrollbar-track-color:#aaa;
}
/* Le sélecteur html n'est pas présent dans la feuille de style, vous devez le rajouter.*/
Ajouter un curseur (Uniquement Internet Explorer)
body { cursor: url(http://url_du_curseur.cur); }
/* Le curseur doit avoir obligatoirement une extension .cur ou .ani */
Modifier la largeur des colonnes
Les modèles 101, 102, 103 et 104, sont des modèles de CSS dit "élastiques" car ils s'adaptent à la résolution de l'écran de votre visiteur. Les colonnes de droite et de gauches ont une largeur fixe et sont maintenues à droite et à gauche de le la fenêtre du navigateur, alors que la colonne centrale, sans taille fixe vient combler l'entre 2 colonnes en s'étirant ou en se rétrecissant. (Cette explication est valable avec 2 colonnes aussi!)
Vous l'avez donc compris, seules les colonnes de modules (droite et/ou gauche) peuvent se voir modifier leur largeur.
Notez, que pour différencier une structure à 3 colonnes d'une structure à 2 colonnes gauche ou droite, on utilise un sélecteur de sélecteur, respectivement #main1, #main3 et #main2.
#main3 #leftnav { width: 300px; }
/* Exemple pour élargir la colonne de gauche d'un blog à 2 colonnes gauche. */
Les modèles 205 et supérieurs, sont des modèles de CSS fixes, c'est à dire que les 2 ou 3 colonnes du blog ont une largeur fixe et sont contenues dans une zone centrée de largeur fixe.
Vous l'avez compris, il est donc possible de donner une largeur précise à toutes les colonnes. Il faut toutefois faire extrêmement attention aux largeurs données pour éviter les débordements horizontaux entrainant le déplacement de la colonne de droite sous le blog. Plus d'info ici.
Pour éviter ces débordements, il suffit d'aditionner la largeur de toutes les colonnes et faire en sorte que ce chiffre soit inferieur de 10px à 20px à la largeur du contenant des colonnes (#global). Cette marge de 10px à 20px représente la largeur des marges interne et externes des colonnes.
Notez, que pour différencier une structure à 3 colonnes d'une structure à 2 colonnes gauche ou droite, on utilise un sélecteur de sélecteur, respectivement #troiscol, #deuxColGauche et #deuxColDroite.
/* Exemple pour élargir les colonnes d'un blog à 3 colonnes. */#global { width: 900px; }
#troisCol #main { width: 440px; }
#troisCol #rightnav { width: 220px; }
#troisCol #leftnav { width: 220px; }
/* 440 + 220 + 220 = 880. Le contenant des colonnes ayant une largeur de 900px on ne risque pas d'avoir un débordement horizontal.*/
Appliquez un style différent à chaque module
Chaque module est caractérisé par un identifiant unique. Voir la liste des identifiants ici . En utilsant cet identifiant comme sélecteur de sélecteur, on peut appliquer un style différent à chaque module.
#Archive .box-content { background: #000; }
/* En supposant que soit déterminée un fond blanc à tous vos modules, le module archive, avec cette rèle, sera seul affublé d'un fond noir. */