CSS : id et class

Comment ça marche ?

ID et Class sont des attributs à ajouter à une balise pour appeler un style qui s'appliquera au contenu de cette balise.
Ce style peut se trouver dans une feuille de style externe ou dans le head.

C'est quoi la différence ?

La différence est qu'un attribut class peut se réutiliser plusieurs fois alors que pour id, son utilisation est unique ( par exemple, une image de fond pour votre page ).
Pour cette raison, il est préférable d'utiliser l'attribut class lorsque vous ne savez pas si votre style devra être utilisé plusieurs fois.

Se servir de class et id

Pour appeler un style, voici deux solutions :
<div class="mon_style">Le texte où sera appliqué mon style</div>
<div id="mon_style">Le texte où sera appliqué mon style</div>
Dans une feuille de style ou le head, les codes CSS commencent par :
.mon_style si on l'appele par l'attribut class
#mon_style si on l'appele par l'attribut id
Ainsi, les codes CSS et HTML seront écrit ainsi :
(ici, nos pages s'appeleront exemple_id_et_class.php et exemple_id_et_class.css)

.cadre {
    border: 1px solid #000000;   /* Bordure : 1 pixel solide et noir */
    color: #FF0000;              /* Couleur du texte : rouge */
    background-color: #AAAAAA; } /* Couleur de fond : gris clair */
    text-align: center; }        /* Texte aligné au centre */

<html>
<head>
<title>Mon premier CSS</title>
 
<!-- J'appele ma feuille de style à l'url 'exemple_id_et_class.css' -->
<link rel="stylesheet" href="exemple_id_et_class.css" type="text/css" title="Normal" />
 
</head>
 
<body>
 
<div class="cadre">
  Mon texte<br />
  Qui sera modifié grace au CSS
</div><!-- Bien prendre soin de fermer la balise ! -->
 
</body>
</html>

» Exemple

Mais encore :

Il existe une autre balise que <div> </div> pour appeler un style, c'est la balise <span> </span>.
Vous pouvez aussi appliquer un style à une balise elle même ( par exemple la balise paragraphe : <p> </p>, la balise titre : <h1> </h1> ... ).
Pour l'appliquer à ce genre de balises, il faut utiliser ce type de codage :
p { Mon code }
Vous remarquerez qu'on ne trouve aucun symbole ( . ou # ) devant la balise car c'est une balise universelle.
Mais il est aussi possible d'atribuer un id et un class à ces balises.
Ceci peut-être utile lorsque vous avez plusieurs paragraphes ( par exemple ) et que vous voulez qu'ils aient un style différent, vous ne pouvez donc pas imposer le code CSS à la balise <p> </p>
Exemple :

<p class="mon_style">
<!-- Ici, mon paragraphe où est attribué le style 'mon_style' -->
</p>

« Tuto