Class et Id en CSS et HTML : guide complet pour débutants

Lorsque vous commencez à créer vos premières pages web avec HTML et CSS, deux notions reviennent très souvent : class et id.

Ces attributs permettent de cibler des éléments pour leur appliquer un style, d’organiser votre code de manière propre, et d’interagir avec eux via JavaScript.

Dans ce tutoriel, vous allez apprendre, pas à pas :

• Ce que sont les class et id
• Comment et quand les utiliser
• Comment les styliser avec du CSS
• Et surtout, à éviter les erreurs les plus courantes

Ce guide est destiné aux débutants. Même si vous partez de zéro, vous serez capable à la fin de structurer vos pages HTML et styliser proprement vos éléments avec CSS. Prêt(e) ? Allons-y !

Qu’est-ce qu’une class et un id en HTML ?

🔹 Définition d’une class (.)

Une class en HTML est un attribut que l’on donne à un ou plusieurs éléments pour les regrouper logiquement. Grâce à cette classe, vous pouvez appliquer un style CSS commun à tous ces éléments.

💡 Exemple simple :

<p class="important">Ce texte est important.</p>
<p class="important">Ce texte est également important.</p>

Dans l’exemple ci-dessus, les deux paragraphes ont la même class : important. Cela signifie qu’on peut leur appliquer le même style en CSS.

🔸 Définition d’un id (#)

Un id est également un attribut HTML, mais il doit être unique dans une page. Cela veut dire que chaque id ne peut être utilisé qu’une seule fois par page. Il sert souvent à identifier un élément de manière précise.

💡 Exemple :

<h1 id="titre-principal">Bienvenue sur mon site</h1>

Cet élément <h1> peut ensuite être ciblé uniquement par son id dans votre CSS.

Différences entre class et id

Comment utiliser class et id en CSS ?

Voyons maintenant comment lier vos class et id HTML à votre fichier CSS pour styliser vos éléments.

🔹 Cibler une class en CSS (.)

On utilise un point (.) devant le nom de la class.

.important {
  font-weight: bold;
  color: red;
}

Avec ce code CSS, tous les éléments HTML qui ont la class important auront un texte en gras et rouge.

🔸 Cibler un id en CSS (#)

On utilise un dièse (#) devant le nom de l’id.

#titre-principal {
  font-size: 2em;
  text-align: center;
}

Ce style ne s’appliquera qu’à l’élément HTML ayant id="titre-principal".

Exemple concret : créer une fiche produit

Voici un exemple complet avec un mélange de class et id :

✅ Code HTML

<div class="fiche-produit">
  <h2 id="nom-produit">Agrafe Affnox</h2>
  <p class="description">Une agrafe pour fissure murale, résistante et discrète.</p>
  <p class="prix">Prix : 12,99 €</p>
</div>

✅ Code CSS

.fiche-produit {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 15px;
}

#nom-produit {
  color: #2c3e50;
  font-size: 1.5em;
}

.description {
  font-style: italic;
}

.prix {
  color: green;
  font-weight: bold;
}

Résultat :

• Le bloc fiche-produit est mis en forme avec une bordure et un espacement
• Le titre a une couleur et une taille spécifique grâce à son id
• La description est en italique
• Le prix est en vert et en gras

Pourquoi ne faut-il pas utiliser l’id à la place de class (et inversement) ?

👉 L’id est réservé à un seul élément. Si vous utilisez plusieurs fois le même id, votre page risque d’avoir un comportement inattendu. Par exemple, si vous essayez de faire défiler la page vers un id, il n’ira peut-être pas au bon endroit.

👉 La class permet de réutiliser le même style pour plusieurs éléments. C’est donc parfait pour organiser votre mise en page.

Bon réflexe :

• Utilisez les class pour appliquer un style commun.
• Utilisez les id pour cibler un élément précis (titre principal, ancre, composant JavaScript…).

Bonne pratique SEO et accessibilité

• Des noms explicites : évitez .c1 ou #id2. Préférez .bouton-achat, .carte-produit, #footer, etc.
• Accessibilité : évitez de baser toute votre mise en forme uniquement sur les class. Privilégiez aussi des éléments sémantiques comme <header>, <main>, <article>, etc.
• SEO : Un bon usage des id permet aussi de naviguer rapidement dans la page via des ancres HTML, ce que Google apprécie.

Peut-on mettre plusieurs class sur un même élément ?

✅ Oui, c’est même très courant et recommandé

Cela permet de combiner plusieurs styles sur un seul élément. Cela rend votre CSS plus modulaire et plus facile à maintenir.

Exemple :

<p class="texte-rouge gras centré">Ce paragraphe combine trois styles.</p>

Chacune des class s’applique individuellement :

.texte-rouge {
  color: red;
}

.gras {
  font-weight: bold;
}

.centré {
  text-align: center;
}

👉 Résultat :

• Le texte est rouge
• Il est en gras
• Et centré

Avantage : si vous souhaitez réutiliser le style « centré » ailleurs, vous n’avez qu’à ajouter .centré à un autre élément sans tout recopier.

Cascade et priorité : qui gagne entre une class et un id ?

C’est ici que le « C » de CSS » entre en jeu : Cascading Style Sheets signifie feuilles de style en cascade.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

La cascade signifie que si plusieurs styles s’appliquent à un même élément, certaines règles vont l’emporter sur d’autres. Il existe un système de priorité :

🥇 Ordre de priorité

Exemple :

<p id="texte" class="rouge">Ceci est un test.</p>

Et le CSS suivant :

p {
  color: blue;
}

.rouge {
  color: red;
}

#texte {
  color: green;
}

👉 Le navigateur applique la couleur verte, car l’id #texte a plus de poids que .rouge ou que p.

Peut-on combiner un id et une class dans le CSS ?

Oui, vous pouvez même combiner des sélecteurs CSS pour être plus précis. N’hésitez pas a consulter notre tutoriel : Tout savoir sur les sélecteurs CSS.

Exemple :

div#banniere {
  background-color: #333;
  color: white;
}

Ce style ne s’appliquera qu’à une balise div ayant l’id banniere.

Autre exemple :

p.important {
  font-weight: bold;
}

Cela stylise uniquement les <p> qui ont la class important.

Cas concret : bouton d’action avec plusieurs class

HTML :

<button class="btn btn-principal btn-large">Acheter maintenant</button>

CSS :

.btn {
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

.btn-principal {
  background-color: #3498db;
  color: white;
}

.btn-large {
  font-size: 1.2em;
}

👉 Grâce aux class multiples, vous pouvez facilement créer des boutons réutilisables partout sur votre site : boutons secondaires, petits, verts, etc., en combinant les styles.

Les ancres avec un id

Les id ne servent pas seulement au CSS. En HTML, ils permettent de créer des ancres pour faire défiler la page vers une section précise.

Exemple :

<h2 id="contact">Nous contacter</h2>

Et un lien plus haut dans la page :

<a href="#contact">Aller à la section Contact</a>

Cela améliore la navigation et la structure SEO de votre page, surtout pour les articles longs. Google apprécie les contenus bien structurés avec des liens internes pertinents.

Organisation du CSS avec class et id

Pour garder un code lisible, appliquez ces principes :

1. Nommez vos class clairement

Mauvais :

<div class="box1"></div>

Bon :

<div class="carte-produit"></div>

2. Regroupez vos fichiers CSS par thème

• layout.css pour la structure
• typographie.css pour les textes
• boutons.css pour vos boutons

3. Utilisez les id seulement quand c’est indispensable

Réservez-les :

• Aux titres uniques (#main-title)
• Aux ancres
• Aux cibles JavaScript

Tout le reste doit être stylisé avec des class.

Ce qu’il faut retenir sur les Class et Id

🔹 Les class permettent d’appliquer un même style à plusieurs éléments
🔸 Les id identifient un élément unique dans la page
🧠 Les class sont réutilisables, les id uniques
🎨 En CSS :

• .class avec un point
• #id avec un dièse

✅ Combinez plusieurs class pour plus de souplesse
🚀 Évitez les doublons d’id
📌 Utilisez les id pour créer des ancres internes
💡 Suivez les bonnes pratiques de nommage pour plus de clarté

Comprendre les class et id en HTML et CSS est une étape essentielle pour tout développeur ou développeuse web débutant(e). Ce sont des outils simples mais puissants pour structurer, styliser et organiser vos pages de manière professionnelle.

Vous êtes désormais en mesure de :

• Créer des pages structurées
• Styliser vos éléments avec précision
• Optimiser vos pages pour le référencement naturel (SEO)

Et surtout, de garder un code clair, maintenable et efficace !

Pensez à toujours tester votre code avec W3C.

Pour allez plus loin avec le HTML et le CSS :

• Les balises meta les plus utilisées
• La relation parent / enfant des balise HTML
• Les différentes unités en CSS
• Les variables en CSS
• Les media query en CSS
• Mise en page Flexbox ou Grid

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr