Comprendre les attributs class et id

2. L’attribut id : un identifiant unique

L’attribut id sert à donner un nom unique à un élément.

• Il ne doit être utilisé qu’une seule fois dans toute la page.
• En CSS, on utilise # pour sélectionner un id.

Exemple HTML :

<h1 id="titre-special">Bienvenue !</h1>

Exemple CSS :

#titre-special {
        color: darkred;
        font-size: 26px;
    }

3. L’attribut class : un style réutilisable

Une classe sert à nommer un groupe d’éléments.

• Plusieurs éléments peuvent avoir la même classe.
• En CSS, on utilise le . (point) pour sélectionner une classe.

Exemple HTML :

<p class="texte-bleu">Ce texte sera bleu.</p>
    <div class="texte-bleu">Ce bloc div aussi !</div>

Exemple CSS :

.texte-bleu {
        color: blue;
    }

4. Combiner plusieurs classes

Un même élément peut utiliser plusieurs classes. Elles sont séparées par un espace.

Exemple HTML :

<div class="encadre texte-bleu">
        Je suis encadré ET bleu !
    </div>

Exemple CSS :

.encadre {
        border: 3px solid black;
    }

    .texte-bleu {
        color: blue;
    }

5. Résumé simple

• id="..." → élément unique → CSS : #nom
• class="..." → groupe → CSS : .nom
• Un élément peut avoir plusieurs classes
• On ne met jamais deux éléments avec le même id

6. Quand utiliser id et class ? (et pourquoi)

En HTML/CSS, id et class ne servent pas juste à “mettre un nom”. Ils permettent d’organiser sa page pour pouvoir appliquer facilement des styles. Voici quand et pourquoi on les utilise vraiment :

✔️ Utiliser une class quand…

• plusieurs éléments doivent avoir le même style ;
• tu veux regrouper des éléments qui se ressemblent (même rôle, même apparence) ;
• tu veux pouvoir réutiliser le même style ailleurs dans la page ;
• tu construis un site organisé (titres secondaires, encadrés, boutons…).

Exemples concrets :

• tous les boutons du site → class="bouton"
• tous les encadrés d’avertissement → class="alerte"
• tous les titres de niveau 2 décorés → class="titre-section"

➜ Une classe sert donc à styler plusieurs éléments différents de la même manière.

✔️ Utiliser un id quand…

• tu veux cibler un seul élément très précis ;
• tu veux lui donner une apparence unique ;
• tu veux faire un lien interne dans la page (ancres HTML) ;
• tu veux un repère clair pour un script JavaScript (plus tard).

Exemples concrets :

• le titre principal de la page → id="titre-principal"
• un encadré très spécifique → id="promo-2025"
• une zone unique (menu, pied de page…) → id="menu", id="footer"

➜ Un id sert à identifier un élément unique. On ne doit jamais en avoir deux identiques dans la même page !

✨ Résumé

• class = groupe réutilisable → pour styliser plusieurs éléments identiques
• id = élément unique → pour cibler un élément précis, spécial
• On peut mettre plusieurs classes sur un même élément
• On ne doit jamais dupliquer un id

7. Règle CSS bien indentée

Une règle CSS contient :

• un sélecteur
• des propriétés
• des valeurs

.exemple-css {
        propriété: valeur;
        autre-propriété: autre valeur;
    }

On décale (on indente) les propriétés avec la touche Tabulation.