{"id":33735,"date":"2024-07-26T20:04:44","date_gmt":"2024-07-26T20:04:44","guid":{"rendered":"\/tutoriels\/?p=33735"},"modified":"2026-03-19T16:54:33","modified_gmt":"2026-03-19T16:54:33","slug":"classe-css","status":"publish","type":"post","link":"\/fr\/tutoriels\/classe-css\/","title":{"rendered":"Classe CSS : guide complet sur l’utilisation du s\u00e9lecteur CSS"},"content":{"rendered":"

Une classe CSS est un attribut utilisé en HTML pour sélectionner et styliser des éléments spécifiques<\/strong>. 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.<\/p>

Suivez ces étapes pour utiliser une classe CSS afin de styliser votre site :<\/p>

    \n
  1. Ouvrir votre feuille de style CSS<\/strong>. Il s’agit du fichier (comme style.css<\/strong>) dans lequel vous écrirez les règles de style.<\/li>\n\n\n\n
  2. Définir la classe CSS<\/strong>. Créez une “règle” en donnant un nom à votre classe, comme .my-class<\/strong>, et en définissant ses propriétés, comme color: blue;.<\/li>\n\n\n\n
  3. Ouvrir votre document HTML<\/strong>. Il s’agit du fichier (comme index.html<\/strong>) contenant le contenu que vous souhaitez styliser.<\/li>\n\n\n\n
  4. Rechercher l’élément HTML à styliser<\/strong>. Identifiez l’élément que vous souhaitez modifier, comme un paragraphe <p><\/strong> ou une division <div><\/strong>.<\/li>\n\n\n\n
  5. Attribuer la classe CSS à l’élément HTML<\/strong>. Ajoutez l’attribut class=”my-class”<\/strong> à la balise d’ouverture de l’élément pour le lier à la règle de style que vous avez définie.<\/li>\n<\/ol>

    \n\n\n\n\n\n\n<\/p>

    Comment fonctionne une classe CSS ?<\/h2>

    Une classe CSS (Cascading Style Sheets)<\/a> fonctionne en créant une “étiquette” réutilisable qui relie votre structure HTML (HyperText Markup Language) à vos règles CSS<\/strong>.<\/p>

    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.<\/p>

    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”).<\/p>

    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<\/strong> dans votre CSS.<\/p>

    Il vous suffit ensuite d’ajouter class=”alert”<\/strong> à 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<\/strong>, et les cinq cases seront automatiquement mises à jour.<\/p>

    Comment utiliser une classe CSS pour styliser un élément HTML ?<\/h2>

    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. <\/strong>Ensuite, ouvrez votre fichier HTML, trouvez l’élément que vous souhaitez styliser et appliquez la classe CSS à cet élément.<\/p>

    1. Ouvrir votre feuille de style CSS<\/h3>

    Tout d’abord, vous avez besoin d’un endroit pour écrire vos règles CSS. Deux possibilités s’offrent à vous :<\/p>