Qu’est-ce qu’une classe CSS et comment l’utiliser pour styliser des éléments HTML ?

Une classe de feuille de style en cascade (CSS) est un sélecteur qui permet de définir le même style pour plusieurs éléments du langage de balisage hypertexte (HTML) simultanément. Elle simplifie la personnalisation des sites web, puisqu’il n’est pas nécessaire d’écrire le code individuellement.

En plus de rendre le code plus propre et plus concis, cet attribut permet de maintenir une cohérence stylistique entre les différents éléments. En raison de ses avantages, l’apprentissage des classes CSS est essentiel pour les développeurs web en herbe.

Dans cette optique, cet article explique comment utiliser les classes CSS pour styliser les éléments HTML. Vous apprendrez également plusieurs astuces qui vous aideront à maîtriser le sélecteur pour un développement web plus efficace.

Comment utiliser une classe CSS pour styliser un élément ?

Pour vous aider à comprendre comment utiliser une classe CSS, cette section explique les six étapes à suivre pour utiliser cet attribut afin de modifier des éléments spécifiques dans votre fichier HTML.

1. Ouvrir votre document HTML

Avant d’utiliser une classe CSS, ouvrez et vérifiez la structure de votre document HTML. Cette étape vous permet de déterminer quel élément modifier pour simplifier le regroupement.

Les étapes pour localiser le fichier diffèrent selon que vous vous trouvez dans une zone de développement local ou dans l’environnement d’hébergement en direct.

Dans un environnement local, ouvrez votre éditeur de code et sélectionnez le document via la fenêtre de l’explorateur de fichiers. Par exemple, les utilisateurs de Visual Studio Code (VSCode) peuvent le faire en naviguant vers Fichier → Ouvrir un fichier.

Si vous vous trouvez dans une zone d’hébergement en direct, ouvrez les fichiers de votre site web à l’aide d’un client de protocole de transfert de fichiers (FTP) tel que FileZilla et téléchargez le document. Ensuite, ouvrez-le localement à l’aide d’un éditeur de texte.

Cependant, cette méthode est plutôt inefficace, car vous devez recharger le fichier chaque fois que vous définissez un nouveau style CSS afin de vérifier son apparence sur le site. Si votre hébergeur ne propose pas d’éditeur intégré dans le panneau de contrôle de l’hébergement, nous vous recommandons d’installer un hébergeur local.

Les utilisateurs de l’hébergement web Hostinger peuvent également ouvrir directement le contenu HTML de leur site web via un navigateur web.

Pour ce faire, accédez à hPanel → Sites Web → Tableau de bord → Gestionnaire de fichiers. Localisez le fichier et double-cliquez dessus pour ouvrir l’éditeur de code. 

2. Identifier l’élément à styliser

Vérifions les éléments de votre document HTML afin d’identifier ceux que vous pouvez classer dans la même classe CSS et auxquels vous pouvez appliquer les mêmes règles de style. Bien que vous puissiez les sélectionner en fonction de vos besoins, il y a plusieurs aspects importants à prendre en considération.

Idéalement, les éléments qui appartiennent à une classe CSS commune doivent avoir un contenu similaire ou un objectif identique. Par exemple, vous pouvez regrouper les balises <h2></h2> car elles partagent la même fonction de définition du deuxième titre.

Vous pouvez également appliquer la même classe CSS aux éléments inclus dans les mêmes balises sémantiques. Par exemple, le contenu de l’en-tête est généralement contenu dans <header></header>.

Outre les titres, vous pouvez modifier d’autres éléments tels que les paragraphes à l’aide des balises <p></p> et les divisions à l’aide de <div></div>.

Avant d’attribuer une classe CSS et d’appliquer des styles, nous vous recommandons de prévisualiser le contenu de votre page web afin d’identifier la structure générale des éléments. Vous pourrez ainsi déterminer les classes dont vous avez besoin et éviter d’en créer trop.

Si le fichier se trouve dans l’environnement d’hébergement en direct, vous pouvez le faire en visitant votre site. Pour la zone de développement local, hébergez le fichier sur un hôte local à l’aide d’une pile web ou utilisez la fonction de prévisualisation de votre éditeur de code. 

3. Attribuer une classe CSS à l’élément

Après avoir choisi les éléments, nous pouvons commencer à attribuer les classes CSS. Pour ce faire, ajoutez l’attribut class après la balise d’ouverture comme suit :

<element class="nom_de_votre_classe">contenu</element>

Par exemple, vous souhaitez attribuer l’ID de classe CSS main-paragraph à chaque élément de paragraphe dans votre HTML. Voici à quoi ressembleront toutes les balises :

<p class="main-paragraph">contenu du paragraphe</p>

Si vous appliquez une classe CSS à un élément sémantique, tous les éléments imbriqués dans cet élément appartiendront au même groupe. Prenons l’exemple de code suivant :

<header class="main-heading">
   <h1>Le titre principal</h1>
      <p>contenu du paragraphe</p>
</header>

Vous pouvez utiliser la classe main-heading pour appliquer un style aux éléments <h></h> et <p></p>. Notez que vous devez toujours spécifier le contenu imbriqué dans le sélecteur CSS individuellement. Nous y reviendrons dans la section suivante. 

Les étapes pour ajouter des classes CSS dans l’environnement de développement local et dans la zone d’hébergement en direct sont les mêmes. Après les avoir attribuées, appuyez sur Ctrl + S dans votre éditeur de code ou sur l’icône de disquette dans le coin supérieur droit si vous utilisez l’éditeur du gestionnaire de fichiers d’Hostinger.

Pour l’instant, vous ne verrez pas de changements sur le front-end puisque nous n’avons pas appliqué de style CSS aux éléments.

4. Passer à votre fichier CSS

Après avoir attribué des classes aux éléments, nous pouvons commencer à appliquer le style. Il existe deux méthodes pour ce faire : utiliser les balises <style></style> dans votre document HTML ou ajouter le code dans une feuille de style CSS distincte.

Si vous n’utilisez que le document HTML, spécifiez le style après votre classe pour faciliter la lecture du code. En voici un exemple :

<body>
   /* élément à styliser */
   <p class="main-paragraph">contenu du paragraphe</p>
   <style>
      /* sélecteur de classe et règles CSS se placent ici */
   </style>
</body>

Cette méthode est plus pratique car il n’est pas nécessaire de passer d’un fichier à l’autre pour modifier les sélecteurs de classe CSS et les éléments. Cependant, le développement et la maintenance risquent d’être compliqués à long terme, car le code sera trop complexe.

Pour cette raison, nous recommandons de créer une feuille de style dédiée dans le même dossier que le document HTML afin d’organiser votre code. Dans un environnement de développement local, vous pouvez le faire via l’explorateur de fichiers de votre système ou en utilisant les fonctionnalités de votre éditeur de code.

Dans VSCode, naviguez vers Fichier → Nouveau fichier. Si vous utilisez le gestionnaire de fichiers d’Hostinger, cliquez sur le bouton Nouveau fichier dans la barre latérale. Vous pouvez utiliser n’importe quel nom, mais assurez-vous qu’il se termine par l’extension .css.

Ensuite, ouvrez votre code HTML et ajoutez ce qui suit en haut du fichier pour connecter la feuille de style. Remplacez stylesheet.css par le nom de votre fichier :

<head>
   <link rel="stylesheet" href="stylesheet.css">
</head>

Cela permet à votre HTML de récupérer et d’appliquer automatiquement le code de style de la feuille de style.

5. Définir la classe CSS

Après avoir attribué les classes CSS et créé la feuille de style, ajoutez la règle de design pour ces classes. Voici à quoi ressemble la syntaxe du code :

.votre-classe { 
  /* la règle va ici */
}

Commencez le code par un sélecteur de classe CSS qui comprend un symbole de point (.) suivi du nom. Ensuite, spécifiez les propriétés CSS à appliquer dans le bloc de déclaration, entre crochets. 

Chaque propriété occupe une seule ligne et se termine par un point-virgule. Par exemple, la feuille de style CSS suivante modifiera la couleur et la graisse du texte dans la classe CSS du main-paragraph :

.main-paragraph { 
   font-weight: bold;
   color: green;
}

Il existe d’autres propriétés CSS qui définissent différents types de style. Par exemple, vous pouvez modifier la couleur d’arrière-plan à l’aide de background-color et définir un design de curseur spécifique lorsque vous survolez un élément à l’aide de cursor.

Pour les classes CSS imbriquées, indiquez leur nom après les parents. Dans cet exemple de code, nous appliquerons un style à class1, qui fait partie de la classe my-header :

.my-header .class1 {
  /* la règle va ici */
}

La même syntaxe s’applique aux éléments imbriqués. Par exemple, le code CSS suivant s’appliquera à l’élément h1 de la classe my-header :

.my-header h1 {
  /* la règle va ici */
}

Notez que l’extrait sélectionnera l’élément ou la classe spécifié(e) imbriqué(e) à n’importe quel niveau. Pour les descendants directs, ajoutez le symbole plus grand que (>) après les noms des classes parentes.

Vous pouvez également sélectionner plusieurs classes ou éléments CSS en les séparant par une virgule. Par exemple, nous appliquerons le style à h1 et p, qui sont tous deux des descendants directs de my-header :

.my-header > h1,
.my-header > p {
  /* la règle va ici */
}

Après avoir ajouté les règles CSS, enregistrez votre fichier et prévisualisez votre page web pour voir si elle s’affiche correctement sur le front-end. Nous vous recommandons de vérifier la conception chaque fois que vous ajoutez un nouveau style CSS.

6. Appliquer la classe à d’autres éléments (facultatif)

Une fois que vous êtes satisfait de la conception et que vous vous êtes assuré que le style s’affiche correctement, revenez à votre code HTML pour appliquer des classes à d’autres éléments.

Puisque vous avez défini la classe et le style, la sélection d’un élément supplémentaire à la fin permet de maintenir la cohérence de la conception. Vous aurez ainsi une idée approximative de la structure finale du site web, ce qui vous permettra de décider quel contenu doit avoir la même apparence.

Cela permet également de minimiser le nombre de nouvelles classes puisque vous pouvez réutiliser les classes existantes. N’oubliez pas de maintenir la cohérence des types d’éléments lorsque vous les réutilisez afin d’assurer la cohésion de la structure du code et de la conception.

Par exemple, si vous souhaitez styliser un élément sémantique <div></div>, affectez-le à une classe div existante. Vous ne devez pas l’utiliser pour d’autres contenus, car l’attribution d’une nouvelle classe à l’avenir peut prêter à confusion et entraîner des incohérences au niveau de la conception.

Conseils pour maîtriser les classes en CSS

Il existe plusieurs bonnes pratiques cruciales en matière de conception de sites web à prendre en compte lors de l’utilisation de classes CSS pour simplifier l’organisation du code, garantir la cohérence de la conception et améliorer l’efficacité de la maintenance.

Nommer correctement toutes les classes

Le nom de votre classe CSS doit fournir des informations sur les attributs ajoutés à l’élément pour en faciliter l’identification. En plus de simplifier la maintenance, il permet de déterminer rapidement lequel réutiliser pour un élément spécifique. 

Par exemple, si vous voulez ajouter une classe qui changera la taille de la police à 36, le nom idéal serait font-36. En revanche, utilisez bg-blue pour un style qui fixe la couleur d’arrière-plan d’un élément au bleu.

En outre, n’utilisez pas le même nom de classe, car votre code de style se chevaucherait, ce qui empêcherait la conception de s’afficher correctement.

Utiliser d’autres sélecteurs

Outre le sélecteur de classe, vous pouvez utiliser d’autres fonctions CSS pour attribuer un style à votre élément HTML. Voici quelques-unes des méthodes les plus courantes pour appliquer un design :

• CSS en ligne – consiste en une mise en forme à l’intérieur de la balise d’ouverture de l’élément HTML.
• Sélecteur ID – applique un style CSS à un élément sur la base de son nom d’identification spécifié après la balise d’ouverture.
• Sélecteur d’élément ou de type – attribue des styles CSS directement à des éléments spécifiques en utilisant leur nom de balise, comme <heading> ou <p>.
• Sélecteur universel – regroupe et applique la même règle CSS à tous les éléments de votre document.

Si ces sélecteurs ciblent le même élément HTML, les navigateurs web les chargeront dans une structure hiérarchique. En fonction de l’ordre, ils donneront la priorité au CSS en ligne, au sélecteur ID, à la classe et au type.

Réduire les propriétés dans une classe

Évitez d’ajouter trop de propriétés CSS à une classe, car cela limitera sa réutilisation. Par exemple, vous ne pouvez pas réutiliser une classe avec un style de poids de police et de couleur de texte pour redimensionner la taille des caractères d’un paragraphe.

Dans ce cas, vous devez ajouter une autre classe pour cet élément spécifique, ce qui rend le code trop long et compliqué à long terme.

Pour modifier des éléments spécifiques, nous recommandons d’ajouter l’attribut style en tant que CSS en ligne après la balise d’ouverture au lieu du sélecteur de classe. Cela permet d’éviter les chevauchements de conception si vous devez réutiliser la classe à l’avenir.

Organiser les classes par groupe

Lorsque vous créez des classes, triez-les en fonction de leur utilisation et de leurs caractéristiques. Par exemple, mettez dans la même catégorie ceux qui ont le même attribut de taille de police ou l’élément cible.

Nous vous recommandons également de créer une documentation pour garder une trace de toutes les classes CSS et de leurs objectifs. Cela permet de simplifier la réutilisation et la maintenance, en particulier à l’avenir lorsque votre code deviendra plus complexe.

Au lieu de rédiger un document séparé, vous pouvez également créer la documentation en utilisant des commentaires dans votre fichier HTML ou CSS. Pour ce faire en CSS, ajoutez les notes à l’intérieur des balises /* */ comme suit :

/* notes sur les caractéristiques ou les fonctionnalités de votre classe /*
.my-header h1 {
  /* la règle va ici */
}

Conclusion

Les classes CSS sont des attributs qui vous permettent de sélectionner plusieurs éléments HTML et d’appliquer le même style simultanément. Cela permet de simplifier le processus de développement web puisque vous pouvez réutiliser des designs existants au lieu d’en écrire de nouveaux à partir de zéro.

Dans cet article, nous avons expliqué comment utiliser les sélecteurs de classe CSS pour regrouper des éléments et appliquer un style :

1. Ouvrez le code HTML de votre site à l’aide d’un éditeur de code comme VSCode ou le gestionnaire de fichiers d’Hostinger.
2. Identifiez les éléments de style en fonction de leurs fonctionnalités et des similitudes de contenu. 
3. Attribuez une classe CSS aux éléments en ajoutant l’attribut class.
4. Créez une feuille de style CSS dans le même dossier et reliez-les.
5. Sélectionnez la classe à l’aide du symbole du point suivi de son nom et des propriétés du style.
6. Appliquez des classes supplémentaires à votre HTML pour maintenir la cohérence de la conception.

Veillez à utiliser des noms descriptifs pour toutes les classes et évitez d’ajouter trop d’attributs de style pour préserver la réutilisabilité. Tirez également parti d’autres sélecteurs et du CSS en ligne afin d’éviter les chevauchements de conception lorsque vous ciblez le même élément.

Classe CSS – FAQ

Pour vous aider à approfondir votre compréhension et à utiliser l’outil plus efficacement, nous allons répondre à plusieurs questions sur la classe CSS.