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

  • loutchay-74

    loutchay-74

    Bonjour, dans le fichier CSS, je ne vois pas ce qui cloche. Dès que je soumets: Il vous manque la règle css pour la classe bleu.

    le 09/08/2020 à 18h45

  • meriam

    meriam Admin

    Bonjour , le nom de la classe doit être bleu et non blue (il faut respecter les valeurs données).

    le 10/08/2020 à 11h06

  • 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

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>