Ce que nous avons vu dans le chapitre précédent avez un petit défaut :
et si je voulais seulement mettre 1 titre, ou 1 paragraphe dans un style différent ?
On peut utiliser pour ça 2 attribut spéciaux qui fonctionnent sur toutes les balises :

• L'attribut class
• L'attribut id

Class et Id

Pour que les choses soit claires : class et id sont pratiquement identiques. Ils ont seulement une petite différence que l'on verra plus bas.
Pour l'instant, concentrons nous sur class.
Comme je l'ai dit, class peut aller sur n'importe quelle balise:
<h1 class=""></h1>
<p class=""></p>
<a classe=""></a>

Mais qu'est ce qu'on doit mettre en valeur à class ?
Un nom, tout simplement. N'importe quel nom, celui que vous vulait.
Les class servent à définir un style personalisé .

Imaginons que vous voulez un stylé "important". Vous ajoutez l'attribut class="important" à toutes les balises que vous voulez modifier dans le fichier .html .
Faites le, avec un paragraphe par exemple.
Maintenant, comment faire avec le CSS pour dire "Je veux que toutes les balises de class important deviennent rouge avec un taille de 20 pixels" ?
Très simple : au lieu du nom de la balise, avant les accolade, vous devrez écrire un point suivis du nom de class .
Ce qui donne le code :


Les balises unniverselles

Il arrive de vouloir appliquer du CSS à certains mots seulement d'un paragraphe.
Le pronlème des class, c'est que ce sont des attribut, il se mettent donc dans une balise.
Meis si je veux colorez juste "mon site" :

<p>Bonjour ! Bienvenue sur mon site ! </p>

J'ai un problème : je ne peux pas mettre de class, car il n'y a pas de balises autour de mon site !
Heureusement, il existe 2 balises qui-ne-servent-à-rien ! Il existent une petite ( mais importante ) différence :
- <span> </span> : c'est une balise de type inline . C'est à dire une balise qui se met à l'intérieur d'un paragraphe, comme <strong> ou <em>... c'est celle-çi dont nous allons nous servir pour changez la couleur de "mon site" !
- <div> </div> : c'est une balise de type block, comme <p> ou <h2>... Elle crée donc un nouveau "bloc" dans la page, ce qui est très utile pour créer un design.

Nous allons donc utiliser <span>, mettre class et faire notre CSS !

XHTML :
<p>Bonjour ! Bienvenue sur <span class="rouge">mon site ! </span></p>

CSS :

C'est assez pratique et très simple à utiliser !

Imbriquations de balises

Encore une notion à comprendre : l'ordre d'imbriquation des balises ...
Un truc complétement tordu, inventé pour compliquer l'existence ? Pas du tout ! ^^
C'est tout simple à comprendre, très logique et très utile surtout, vous verrez ;)

Donc, imaginons que je veuille changer le style de toutes les balises <strong> qui sont à l'intérieur les balises <a> :

a strong /* ça signifie " toutes les balises strong à l'intérieur des balises a" */
{
    color: red;
}

Les noms de 2 balises sont séparée par un espace, et pas par une virgule, attention .
Faites surtout bien attention à l'ordre !

Esseyez, c'est bien pratique si l'on veut modifier des balises seulement dans les paragraphes...
On peut d'ailleurs mélanger des balises et des class :

p a .bleu, h2 em .rouge
{
    /* Et patati et patata ... */
}

Oulala, ça par contre c'est tordu !
Remarquez bien la virgule :

p a .bleu, h2 em .rouge

En bleu, ça signifie : "Toutes les balise .bleu, qui sont dans les liens qui sont dans les paragraphes" .
En rouge : "Toutes les balises .rouge qui sont dans les balises em qui sont dans les titre de taille 2" .
Donc, en tout ça veut dire : "Toutes les balise .bleu qui sont dans les liens qui sont dans les paragraphes ET toutes les balises .rouge qui sont dans les balises em qui sont dans les titre de taille 2".


Voila, vous savez les bases, nous allons maintenant pouvoir apprendre une foule de propriétés ...
Allez, au boulot ! ^^