Ajouter une classe dans son CSS : l'héritage des propriétés

Pour répondre à Izumichan, qui me demande en substance ce que j'ai fumé pour parler tout le temps de lignes qui n'existent pas dans le CSS (mais très poliment, hein), je me suis dit qu'une petie précision ne serait pas inutile sur le pourquoi du comment de ces éléments qui n'existent pas dans le CSS et qu'on vous dit fort cavalièrement de rajouter, comme ça, paf !

^{Oui, pourquoi ???}

Dans le CSS par défaut, quand certaines fonctions ne sont pas explicitées, elles peuvent avoir les paramètres de couleurs, police, etc... d'un élément plus général : on dit qu'elles héritent du style de l'élément parent. *
Ok, ça paraît du chinois, mais en fait c'est simple : imaginons qu'on soit Dieu et qu'on décide que l'espèce des chiens doit avoir 4 pattes ... Bon, du coup, tous les chiens, des  caniches aux labradors, auront 4 pattes, une fois qu'on l'a dit pour les chiens, plus la peine de le préciser pour une race de chiens en particulier :  l'espèce "chien" est l'élément parent.
Par contre, en tant que Dieu, on peut aussi décider que les caniches seront petits et frisés et les labradores grands et blonds (si je me gourre, que les amis des chiens me pardonnent, je m'y connais qu'en chatounes, moi...).

Exemple pour la ligne #RightPart { } (la question d'Izumichan) :

Maintenant, il faut voir les modules en général comme l'espèce parente "chien", dont les caractéristiques sont définies dans .box { } : tout ce qu'on met là sera commun à tous les modules ; par contre #RightPart, #LeftPart (attention aux mauscules, ce n'est pas indifférent), ...etc sont comme des  races de chiens : ils héritent de toutes les caractéristiques de .box que tu ne modifies pas dans #RightPart { }, mais si on met une couleur de fond, par exemple dans cette fonction, elle va changer, mais que pour ce module .
Tout ça pour dire que si tu n'as pas de #RightPart { } dans ton CSS, ça veut juste dire que ton module Texte Libre n'a aucune caractéristique différente de .box { } . Mais dès lors que tu rajoutes la ligne #RightPart { background : #... }, par exemple, ce module aura toutes les caractéristiques des autres modules sauf la couleur du fond.

D'une manière générale, quand on conseille de mettre telle ou telle ligne dans ton CSS et que tu ne trouves rien qui resssemble, il faut juste la rajouter : c'est comme si tu mettais une précision dans ton CSS.

Attention, pour bien comprendre l'aspect de tel ou tel de vos éléments, il faut savoir aussi que ce système fonctionne comme des poupées russes : un élément parent va lui-même hériter du style de son propre parent (si rien n'est re-spécifié) ; ainsi, les modules définis par .box dérivent des colonnes #leftnav ou #rightnav (selon qu'il sont dans la colonne de gauche ou de droite). Finalement, tout dérive du "grand parent" body : si dans cette ligne, on définit une couleur de texte noire, par exemple, et que par la suite, on ne re-précise plus de valeur pour "color", ce sera écrit en noir dans toutes les parties du blog. Certaines parties dérivent directement de body, d'autres sont ses arrières-petites filles et ont hérité de tout un tas de modifications entre temps.
Cette façon de décrire le style de chaque élément en "poupée russes", qui a l'énorme avantage d'éviter de respécifier tout le temps ce qui reste pareil et met en valeur ce qui change par rapport à l'élément parent, a donné son nom au CSS : Cascading Style Sheet ou Feuilles de style en cascade.

* Attention, précision :  tous les attributs qu'on ne spécifie pas n'héritent pas nécessairement de la valeur de l'attribut de l'élément parent, certains ont des valeurs par défaut au cas où rien n'est écrit, le background, par exemple ... Pour savoir si une propriété a une valeur par défaut ou une valeur héritée, je vous conseille d'aller sur ce site extrèmement utile : vous cliquez sur la propriété qui préoccupe et vous regardez sur la page qui s'affiche, en haut, à la ligne :

• Valeur héritée : oui/non
• Valeur par défaut : non/oui