On voit ici et là des codes CSS prêts à l'emploi et l'on vous dit : "tu mets ça et ça marchera". Même si effectivement cela fonctionne, il est important d'avoir quelques notions de CSS afin:

• de ne pas planter votre blog
• de bien comprendre ce que vous faites
• d'être capable de modifier ce code

Cette partie concerne la structure utilisée dans la feuille de style CSS. Vous y accédez par Apparence / Modifier le thème / Ajouter du CSS

On commence toujours par le nom du sélecteur. (par exemple h3 ou .maclasse ou #madiv)

Si le sélecteur n'est pas précédé d'un . ou un # s'il s'agit d'un selecteur de type comme h3, a, p etc.
Par contre s'il s'agit d'une classe, il sera précédé de . (point) et pour une id, il sera précédé de # 

Ensuite, les propriétés CSS seront mises entre accolades comme dans l'exemple ci-contre et séparées par des points-virgule.

Mais que fait cet exemple ?

Il va appliquer au contenu de tous les sélécteurs maclasse (nom que vous choisissez) de votre blog une couleur de texte bleu (color:blue;) et une couleur de fond blanche (background-color:white;).

L'héritage

Comme l'indique son nom (Cascading Style Sheets ou feuilles de style en cascade), les élements qui en descendent héritent de ces caractéristiques.

Prenons le code HTML suivant. En lui appliquant les propriétés définies pour .maclasse , on obtient cet élément écrit en bleu sur fond blanc.
<div class="maclass">         <div id="mazone">              <p>Voici le tableau</p>              <table>                 <tr><th>Titre tableau</th></tr>                 <tr><td>Ligne 1</td></tr>                 <tr><td>Ligne 2</td></tr>              </table>         </div> </div>	Voici le tableau Titre tableau Ligne 1 Ligne 2
Cela correspond bien au comportement attendu. Voyons maintenant comment faire ressortir le titre en le mettant sa couleur de fond en jaune. La balise correspondant au titre est <th> mais on ne va pas se contenter de mettre th comme nom de sélecteur. Pourquoi ? Parce que l'on ne veut pas que cela se produise sur tous les tableaux du blog mais seulement sur ce tableau. On va aussi en profiter pour mettre le contenu des balises <p> en vert et mettre une bordure rouge aux cellules du tableau ainsi qu'une bleue pour la cellule du titre.  Le code CSS est donc modifié comme ci-dessous et vous pouvez constater le changement.
.maclasse { color:blue; background-color:white; } .maclasse th { background-color:yellow; border: 1px solid blue; } .maclasse td { border:1px solid red; } .maclasse p { color:green; }	Voici le tableau Titre tableau Ligne 1 Ligne 2
Quelques explications sur ce code CSS:  .maclasse n'est pas modifiée  .maclasse th nous permet d'accéder à tous les selecteurs th contenus dans maclasse  .maclasse td comme ci-dessus mais pour les cellules du tableau  .maclasse p  agit sur toutes les selecteurs p contenus dans maclasse

Affecter les mêmes propriétés pour plusieurs classes

Vous pouvez souhaiter avoir une base commune pour des classes (ou id) différentes et il n'est pas utile de ré-écrire une seconde fois les propriétés. Par exemple, voyez les deux classes ci-dessous

Classe Astuce

Classe danger

 Le code CSS pour ces deux classes est le suivant:

La première partie (.astuce, .danger) va être appliquée sur la classe astuce et la classe danger.
Elle met une bordure en pointillés de 1 px d'épaisseur avec les propriétés border-style et border-width et la couleur du texte en noir avec la propriété color.

La seconde partie (.astuce) s'applique uniquement à la classe astuce et complète les propriétés déjà définies par la mise en place d'une image de fond positionnée en haut à gauche et non répétée. Elle fixe en plus une marge intérieure gauche de 35 px. Cela permet de positionner le texte en dehors de l'image.

La troisième partie (.danger) s'applique uniquement à la classe danger et fixe les mêmes propriétés que pour la classe astuce mais avec une image différente.

Les commentaires

Pour peu que vous vouliez embellir un minimum votre blog, vous allez énormément recourir à ce code CSS. Vous finirez par créer un fichier de grande taille dans lequel vous finirez par avoir un peu de mal à retrouver un élément en particulier. La solution ? Mettre des commentaires tout simplement.

Ceux-ci sont placés entre /* et */

Voyez l'exemple ci-contre

Encore plus de possibilités

Le CSS offre d'autres possibilités pour l'accès aux sélecteurs. Je ne vais pas toutes les détailler mais simplement vous en montrer quelques unes d'utiles.

Pour cela, on va se servir du code HTML suivant comme base.

 

 

Regardez bien le résultat ci-contre. Il correspond au code CSS ci-dessous. D'accord, ça n'a pas beaucoup d'interêt mais cela montre un peu plus les capacités du CSS
#exemple {margin-left:30px;background-color:salmon;padding:0px;color:darkblue;} #exemple p {color:black;background-color:white;margin-left:0px;} #exemple p:first-letter {font-size:30px;color:Green;} #exemple p:first-of-type {background-color:blue;} #exemple p:last-of-type {background-color:red;} #exemple p:last-child:hover {background-color:white;} #exemple p em {text-decoration:underline;} #exemple p>a:hover {color:white;} #exemple li {background-color:red;} #exemple a {color:lightgreen;} #exemple li:hover {background-color:white;color:black;list-style-image:url('http://data0.ek.la/le-blog-facile/perso/view.png');}

 

#exemple  Définit les propriétés générales pour l'id exemple. (marge gauche de 30px, fond couleur salmon, marge intérieure nulle et texte en bleu foncé)

#exemple p reprend les propriétés ci-dessus en mettant le texte en noir et une marge gauche nulle. Cela agit sur tous les selecteurs p qui sont enfants de exemple.

#exemple p:first-letter reprend les propriétés de #exemple et de #exemple p et agit uniquement sur la première lettre des sélecteurs p contenus dans exemple. La taille est fixée à 30px et la couleur en vert.

#exemple p:first-of-type correspond au premier élément de type p contenu dans exemple (on lui met une couleur de fond en bleu)

#exemple p:last-of-type correspond au dernier élément de type p contenu dans exemple (on lui met une couleur de fond en rouge)

#exemple p:last-child:hover correspond au survol du dernier élément de type p contenu dans exemple

#exemple p em correspond au texte en italique contenu dans les éléments p de exemple. On décide de les souligner. Notez que le texte en italique en bleu n'est pas souligné puisqu'il ne fait pas partie de p

#exemple p>a:hover correspond au survol du premier lien (a) d'un sélecteur p de exemple

#exemple li correspond à tous les éléments li de exemple

#exemple a correspond à tous les liens de exemple

#exemple li:hover correspond au survol de toutes les sélecteurs li de exemple

Pour approfondir

Retrouvez tous les sélecteurs sur