Les imbrications de code et, ou de balises

Donc, comme je sais que vous êtes curieux, vous vous êtes certainement demandés ce que certains codes css voulaient dire !

Des codes du genre :

.module-categories a.subcategory, .module-categories a.subcategory-root {
background:transparent none repeat scroll 0%;
color:#C10000;
font-size:14px;
font-weight:normal;
height:auto;
margin-left:10px;
}

Bon on va commencer doucement avec une imbrication simple, je vais prendre un exemple, disons que l'on veut donner un style particulier à un élément contenu dans un autre élément.

Voici mon exemple : Dans ma page, j'ai plusieurs texte, mais je veux qu'un seul soit différent des autres en apparences.
Je commence d'abord par donner un repère avec un attribut pour l'ensemble de mes textes.

Puis je mets mes différents textes, chacun dans une balise de paragraphe.
Voici mon code html:

<div id="contenu">

<p> Le meilleur moyen de prendre un train à l'heure, c'est de s'arranger pour rater le précédent.</p>

<p> Une auto-stoppeuse est une jeune femme généralement jolie et court vêtue qui se trouve sur votre route quand vous êtes avec votre femme.</p>

<p> Lorsque ma femme me fait un cadeau, j'ai deux surprises : d'abord le cadeau, ensuite de le payer. </p>

</div>

(bah ! quoi ! Ils sont pas bien mes textes !)
Vous remarquerez que je ferme mon attribut avec : </div>

Ensuite je vais indiquer une class unique pour mon deuxième texte que je souhaite différent des deux autres.

Je vais nommer mon texte : "texte2". (pourquoi faire compliqué !)

Voici donc mon code html avec cette fois ci un attribut "class".

<div id="contenu">

<p> Le meilleur moyen de prendre un train à l'heure, c'est de s'arranger pour rater le précédent.</p>

<div class="texte2"><p> Une auto-stoppeuse est une jeune femme généralement jolie et court vêtue qui se trouve sur votre route quand vous êtes avec votre femme.</p></div>

<p> Lorsque ma femme me fait un cadeau, j'ai deux surprises : d'abord le cadeau, ensuite de le payer. </p>

</div>

Occupons nous maintenant du CSS.
Commençons par le "contenu", je vais lui indiquer quelques propriétés, je vous montre et je vous explique.

#contenu {
color:blue;
font-size:14px;
font-family:arial,sans-serif;
}

J'indique ici une couleur bleu aux textes, ainsi qu'une grandeur de police de 14px, puis une famille arial.

Maintenant, je vais m'occuper de mon deuxième texte que je veux différents mais avec la même police et la même grandeur de police, je vais lui donner une autre couleur de texte, des marges pour faire plus joli et je vais rajouter un cadre, voici mon code:

#contenu .texte2 {
color:red;
border:1px solid black;
padding:0px 20px 0px 20px;
}

Vous remarquez que je n'ai pas répété mes propriétés pour la police et la grandeur de police, et que j'ai rajouté le nom de mon attribut de l'ensemble de mes textes, c'est ça l'imbrication de code !
Ce code veut dire que le "texte2" contenu dans le code "contenu" aura une police de couleur rouge, une bordure de 1px de couleur noir, et qu'il héritera de la police et de la grandeur de police de l'attribut "contenu".

Voici ce que ça donnera :