Mar 19, 2026
Chaimaa C.
7minutes de lecture
Classe CSS : guide complet sur l’utilisation du sélecteur CSS
Une classe CSS est un attribut utilisé en HTML pour sélectionner et styliser des éléments spécifiques. Il permet d’appliquer simultanément le même ensemble de règles de style – comme la couleur, la taille de la police ou l’espacement – à plusieurs éléments en même temps, plutôt que de coder chacun d’eux individuellement.
Suivez ces étapes pour utiliser une classe CSS afin de styliser votre site :
- Ouvrir votre feuille de style CSS. Il s’agit du fichier (comme style.css) dans lequel vous écrirez les règles de style.
- Définir la classe CSS. Créez une “règle” en donnant un nom à votre classe, comme .my-class, et en définissant ses propriétés, comme color: blue;.
- Ouvrir votre document HTML. Il s’agit du fichier (comme index.html) contenant le contenu que vous souhaitez styliser.
- Rechercher l’élément HTML à styliser. Identifiez l’élément que vous souhaitez modifier, comme un paragraphe <p> ou une division <div>.
- Attribuer la classe CSS à l’élément HTML. Ajoutez l’attribut class=”my-class” à la balise d’ouverture de l’élément pour le lier à la règle de style que vous avez définie.
Comment fonctionne une classe CSS ?
Une classe CSS (Cascading Style Sheets) fonctionne en créant une “étiquette” réutilisable qui relie votre structure HTML (HyperText Markup Language) à vos règles CSS.
Lorsque vous attribuez une classe à un élément HTML, vous demandez au navigateur de trouver la définition de style pour cette classe dans la feuille de style et de l’appliquer à cet élément spécifique.
Cela crée une puissante séparation des préoccupations. Votre fichier HTML gère le contenu (le “quoi”), tandis que votre feuille de style gère la présentation (le “comment ça se présente”).
Par exemple, imaginez que vous ayez cinq boîtes d’alerte sur votre site web qui ont toutes besoin d’une bordure rouge et d’un texte en gras. Au lieu de styliser chaque boîte individuellement, vous pouvez créer une classe unique nommée .alert dans votre CSS.
Il vous suffit ensuite d’ajouter class=”alert” à chacune des cinq cases de votre code HTML. Si vous décidez par la suite de changer la bordure en bleu, il vous suffira d’effectuer la modification une seule fois dans la définition de la classe .alert, et les cinq cases seront automatiquement mises à jour.
Comment utiliser une classe CSS pour styliser un élément HTML ?
Pour styliser un élément HTML à l’aide d’une classe CSS, ouvrez votre feuille de style CSS et définissez les règles de style. Ensuite, ouvrez votre fichier HTML, trouvez l’élément que vous souhaitez styliser et appliquez la classe CSS à cet élément.
1. Ouvrir votre feuille de style CSS
Tout d’abord, vous avez besoin d’un endroit pour écrire vos règles CSS. Deux possibilités s’offrent à vous :
- CSS interne. Vous pouvez placer vos règles CSS directement dans votre document HTML dans les balises , généralement placées dans la section . C’est rapide pour les petits projets ou les tests, mais cela peut encombrer votre fichier HTML.
- Feuille de style externe. C’est la méthode recommandée pour la plupart des projets. Vous créez un fichier séparé avec une extension .css, comme style.css. Cela permet d’organiser les styles et de les séparer du contenu.
Vous liez ensuite ce fichier à votre document HTML en ajoutant une balise à l’intérieur de la section :
<head> <link rel="stylesheet" href="style.css"> </head>
Pour le reste de ce tutoriel, nous supposerons que vous utilisez un fichier style.css externe.
2. Définir la classe CSS
Dans votre fichier style.css, définissez une classe en tapant un point (.) suivi du nom de votre choix. Ce nom est le sélecteur. Ensuite, ajoutez des accolades {} et placez vos propriétés CSS (les règles) à l’intérieur.
.highlight {
font-weight: bold;
color: green;
background-color: #f0f0f0;
}Ce code crée une classe nommée highlight. Tout élément HTML doté de cette classe aura un texte vert et gras sur fond gris clair.
Vous pouvez également créer des sélecteurs plus spécifiques. Par exemple, pour ne styliser que les éléments <h1> qui se trouvent à l’intérieur d’un élément ayant la classe highlight, écrivez :
.highlight h1 {
/* Cette règle s'applique uniquement aux balises h1 situées à l'intérieur de .highlight */
color: red;
}3. Ouvrir votre document HTML
Ouvrez maintenant le fichier HTML (par exemple, index.html) qui contient le contenu que vous souhaitez styliser. Vous pouvez le faire en utilisant n’importe quel éditeur de texte, tel que VS Code, ou directement via le gestionnaire de fichiers de votre hébergeur.
Les clients de l’hébergement web infogéré d’Hostinger peuvent accéder au gestionnaire de fichiers via hPanel → Sites web → Tableau de bord → Gestionnaire de fichiers. Ensuite, localisez et double-cliquez sur le fichier HTML pour ouvrir l’éditeur de code.
4. Trouver l’élément HTML à styliser
Examinez votre code HTML et identifiez l’élément ou les éléments que vous souhaitez styliser. Par exemple, vous pouvez avoir plusieurs paragraphes (<p>) qui servent d’avertissements, ou vous pouvez vouloir styliser une <div> spécifique qui contient la biographie d’un auteur.
Réfléchissez aux éléments qui partagent un objectif ou un type de contenu commun. Par exemple, toutes les balises <h2> pourraient partager une classe, tandis que tous les boutons d’appel à l’action pourraient en partager une autre. Le regroupement logique des éléments est la clé d’une utilisation efficace des classes.
💡Conseil de pro
Pour vérifier la structure du code de votre site, utilisez l’outil d’inspection d’éléments de votre navigateur web. Pour y accéder, cliquez avec le bouton droit de la souris sur votre écran et sélectionnez Inspecter.
5. Attribuer la classe CSS à l’élément HTML
Pour appliquer votre règle CSS, ajoutez l’attribut class à la balise d’ouverture de l’élément HTML. La valeur de l’attribut doit être le nom de la classe que vous avez défini dans votre fichier CSS, mais sans le point.
Utilisez la classe .highlight et appliquez-la à un paragraphe :
<p class="highlight">This paragraph will be bold, green, and have a gray background.</p>
Vous pouvez appliquer cette classe à autant d’éléments que vous le souhaitez :
<div class="highlight">This whole division gets the style.</div> <p>This is a normal paragraph.</p> <p class="highlight">This paragraph also gets the style.</p>
Après avoir enregistré vos fichiers HTML et CSS, ouvrez le fichier HTML dans votre navigateur. Vous verrez les styles appliqués aux éléments que vous avez étiquetés avec la classe.
Avantages de l’utilisation des classes CSS
L’utilisation des classes CSS offre plusieurs avantages significatifs dans le développement web, principalement axés sur l’efficacité, l’organisation et la maintenabilité.
- Réutilisabilité. C’est le plus grand avantage. Vous pouvez définir une règle de style une seule fois (par exemple, .button-primary) et appliquer cette classe à tous les boutons primaires de votre site web. Cela vous évite d’écrire un code répétitif pour chaque bouton.
- Maintenabilité. Lorsque vous devez mettre à jour le design de votre site, les classes vous simplifient la tâche. Pour modifier la couleur de tous vos boutons primaires, il vous suffit de modifier une seule fois la définition de la classe .button-primary dans votre fichier CSS. La modification s’appliquera automatiquement à tous les éléments utilisant cette classe.
- Organisation et lisibilité. Les classes permettent de séparer le contenu (HTML) de la présentation (CSS). Cette “séparation des préoccupations” rend votre code plus propre, plus sémantique et beaucoup plus facile à lire, à comprendre et à déboguer pour vous ou d’autres développeurs.
- Flexibilité. Un élément HTML peut avoir plusieurs classes. Par exemple, <button class=”button button-primary”> pourrait hériter des styles de base de .button et des styles de couleur spécifiques de .button-primary. Cette approche flexible et modulaire vous permet de créer des conceptions complexes en combinant des classes simples.
Conseils pour maîtriser les classes CSS
Pour maîtriser les classes CSS, il ne suffit pas de les faire fonctionner, il faut aussi appliquer les meilleures pratiques pour écrire un code propre, évolutif et facile à maintenir. Vous trouverez ci-dessous des conseils pour vous aider à rédiger des feuilles de style CSS comme un professionnel.
Utiliser des noms clairs et descriptifs
Un nom de classe doit décrire ce qu’est l’élément ou pourquoi il est stylé, et non comment il est stylé. Par exemple, un nom comme .alert-danger est plus descriptif et réutilisable que .red-text-bold.
Si vous décidez par la suite de rendre les alertes de danger bleues, le nom .alert-danger a toujours du sens, mais .red-text-bold prêterait à confusion. Utilisez des noms clairs et logiques qui décrivent l’objectif du composant.
Exploiter d’autres sélecteurs CSS
Les classes ne sont pas le seul moyen de sélectionner des éléments. Comprendre les autres sélecteurs permet d’écrire des feuilles de style CSS plus efficaces.
- Sélecteur ID. Un identifiant (#my-id) est similaire à une classe, mais il doit être propre à un seul élément de la page. Elle est plus spécifique qu’une classe, ce qui signifie que ses règles l’emportent toujours en cas de conflit.
- Sélecteur d’éléments. Vous pouvez styliser tous les éléments d’un certain type, comme p ou h2. Cette fonction est idéale pour définir des styles de base, comme une taille de police par défaut pour tous les paragraphes.
- Combinateurs. Vous pouvez combiner des sélecteurs pour être plus précis. Par exemple, .sidebar p ne sélectionne que les paragraphes qui se trouvent à l’intérieur d’un élément ayant la classe sidebar.
Réduire les propriétés d’une classe
Créez de petites classes réutilisables qui font bien une chose. Par exemple, au lieu d’une grande classe comme .page-sidebar-box qui définit la mise en page, la couleur et la police, vous pouvez créer plusieurs classes : .box (pour la mise en page) .sidebar-theme (pour la couleur) et .featured-text (pour la police).
Vous pouvez ensuite les combiner dans votre code HTML : <div class=”box sidebar-theme featured-text”>. Cette approche modulaire est très réutilisable et facile à maintenir.
Organiser les classes CSS en groupes
Au fur et à mesure que votre fichier style.css s’étoffe, il peut devenir difficile à gérer. Organisez vos classes en les regroupant par commentaires.
Par exemple, vous pouvez créer des sections pour la “mise en page”, les “boutons”, les “formulaires” et la “typographie”. Il est ainsi beaucoup plus facile de retrouver et de modifier vos styles par la suite.
/* --- Button Styles --- */
.button {
/* base button styles */
padding: 10px 15px;
border-radius: 5px;
}
.button-primary {
/* primary button styles */
background-color: blue;
color: white;
}
/* --- Form Styles --- */
.form-input {
/* input styles */
border: 1px solid #ccc;
padding: 8px;
}Prochaine étape dans votre apprentissage du CSS
Après avoir maîtrisé les principes fondamentaux des classes CSS, les prochaines étapes de votre apprentissage devraient se concentrer sur le responsive design et les techniques de mise en page avancées. Les utilisateurs consulteront votre site sur des téléphones, des tablettes et des ordinateurs de bureau, c’est pourquoi il est essentiel d’adapter votre style.
Il est essentiel de comprendre les points de rupture CSS, qui permettent d’appliquer des styles différents en fonction de la taille de l’écran de l’utilisateur. C’est la clé pour que votre site web ait une belle apparence sur n’importe quel appareil.
Au fur et à mesure que vous construisez des projets plus complexes, il est utile de disposer d’un guide de référence. Ajoutez notre aide-mémoire CSS à vos favoris pour consulter rapidement les propriétés, les sélecteurs et la syntaxe.
Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.
Chaimaa est une spécialiste du référencement et du marketing de contenu chez Hostinger. Elle est passionnée par le marketing digital et la technologie. Elle espère aider les gens à résoudre leurs problèmes et à réussir en ligne. Chaimaa est une cinéphile qui adore les chats et l'analyse des films.
