Exercice 9/20

  • Dans le fichier index.html, ajoutez l'attribut class aux deux éléments HTML et donnez lui la valeur "bleu";
  • Dans le fichier stylesheet.css, ajoutez le sélecteur .bleu et attribuez la propriété color et sa valeur blue;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Note :
Ce n'est pas le but de cet exercice, mais une solution plus simple aurait été d'utiliser le sélecteur body et de lui attribuer la propriété color: blue. Avec le principe de cascade, la règle CSS aurait été appliquée à tous les éléments enfants de body qui en auraient hérité par défaut.

Leçon 9/20

Le sélecteur **class** est utile quand vous souhaitez appliquer le même style à plusieurs éléments HTML différents. Plutôt que d'appliquer, en la répétant, la même règle aux différents sélecteurs, vous assignez une seule et même class aux éléments HTML concernés, puis définissez le style de cette class dans l'onglet CSS.

Les "class" sont assignées aux éléments HTML grâce à l'attribut class suivi du signe =, comme ceci :

‹h1 class="NomDeLaClass"›‹/h1›    
‹p class="NomDeLaClass"›‹/p›    

Dans le fichier .css, la class s'écrit comme ceci :

.NomDeLaClass {
    color: red;
}

N'oubliez pas le point "." devant le nom de votre class.

Dans l'exemple ci-dessus, le titre h1 et le paragraphe p seront tous les deux en rouge.

Commentaires les mieux notés

  • benedictenicolas1964-73

    benedictenicolas1964-73

    bonsoir, c'était subtile...

    le 04/11/2019 à 21h10

  • moe82855-24

    moe82855-24

    c'est simple tu déclares les deux class de même noms après dans css tu écris ça

    le 18/10/2019 à 17h03

  • sayks.inpanya-46

    sayks.inpanya-46

    le code c'est: <h1 class="bleu"> je suis un titre ></h1>

    le 02/12/2019 à 10h03

  • ferreiracerqueirac-14

    ferreiracerqueirac-14

    c'est bon j'ai trouvé le problem. La ecriture bleu/blue. Merci :)

    le 18/12/2018 à 10h38

  • mfakhredine

    mfakhredine

    Bonjour j'ai comme l'impression que sa ne fonctionne pas :(

    le 03/07/2016 à 20h16

20 Commentaires

  • edwrolie-17

    edwrolie-17

    ca y est j'ai compris mon erreur et corrigé grace à vos commentaires.

    le 17/05/2020 à 01h21

  • sayks.inpanya-46

    sayks.inpanya-46

    le code c'est: <h1 class="bleu"> je suis un titre ></h1>

    le 02/12/2019 à 10h03

  • benedictenicolas1964-73

    benedictenicolas1964-73

    bonsoir, c'était subtile...

    le 04/11/2019 à 21h10

  • moe82855-24

    moe82855-24

    c'est simple tu déclares les deux class de même noms après dans css tu écris ça

    le 18/10/2019 à 17h03

  • ferreiracerqueirac-14

    ferreiracerqueirac-14

    c'est bon j'ai trouvé le problem. La ecriture bleu/blue. Merci :)

    le 18/12/2018 à 10h38

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "class"</title> </head> <body> <h1>Je suis un titre</h1> <p>Je suis un paragraphe.</p> </body> </html>