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

  • nad35

    En continuant les chapitres, je suis revenue sur mon erreur et j'ai réussi à la corriger !

  • ou.broly-83

    Bonjour j'ai fais comme dans l'exemple mais je ne comprends pas ça ne marche pas. Pourriez vous m'aidez SVP? merci

  • pizzutoandrea3

    aidee

  • fati_yam-62

    Bonjour,

44 Commentaires

  • nad35

    nad35

    En continuant les chapitres, je suis revenue sur mon erreur et j'ai réussi à la corriger !

    le 20/09/2018 à 15h08

  • ou.broly-83

    ou.broly-83

    Bonjour j'ai fais comme dans l'exemple mais je ne comprends pas ça ne marche pas. Pourriez vous m'aidez SVP? merci

    le 21/07/2018 à 12h35

  • mram

    mram Administrateur

    Bonjour, la ligne 3 dans le CSS est inutile.

    le 01/08/2018 à 05h01

  • pizzutoandrea3

    pizzutoandrea3

    aidee

    le 06/06/2017 à 23h40

  • ousmane445

    ousmane445

    Bonjour mram, quel est la reponse de cet exercice. je suis bloque depuis hier

    le 10/02/2017 à 11h42

  • mram

    mram Administrateur

    Le nom du sélecteur est incorrect.

    le 03/07/2016 à 22h35

  • lau.seriwath

    lau.seriwath

    Bonjour, je ne comprends pas mon erreur, pourtant le texte est bien en bleu.

    le 22/09/2016 à 15h00

  • mfakhredine

    mfakhredine

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

    le 03/07/2016 à 20h16

  • dzmadrak

    dzmadrak

    bonjour j'ai des problemes mon css est bleu{ color:blue; } et mon html<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "class"</title> </head> <body> <h1 class="bleu">Je suis un titre</h1> <p class="bleu">Je suis un paragraphe.</p> </body> </html>

    le 26/01/2017 à 14h57

  • mram

    mram Administrateur

    Ligne 1 dans le CSS il manque le point dans le sélecteur.

    le 14/02/2017 à 01h16

  • celia-huart

    celia-huart

    <h1 class="bleu";>Je suis un titre</h1> <p class="bleu";>Je suis un paragraphe.</p> Bonjour, mon texte est en bleu, et je ne comprend pas pourquoi il ne veut pas me valider ma reponse. il me dit que la syntaxe est incorrecte, mais je ne vois pas ma fute. Par avance merci

    le 01/01/2017 à 11h15

  • mram

    mram Administrateur

    Un espace après les double points ligne 2 du CSS ...

    le 22/09/2016 à 23h39

  • mram

    mram Administrateur

    Oui c'est juste la syntaxe qui est en cause dans le fichier .css. Il faut que "color: blue" soit à la ligne. Et la parenthèse fermante sur une ligne à part aussi.

    le 02/01/2017 à 14h48

  • pizzutoandrea3

    pizzutoandrea3

    petite aide

    le 10/06/2017 à 19h00

  • mram

    mram Administrateur

    Votre sélecteur n'est pas bon, la balise "bleu" n'existe pas, mais la class CSS "bleu" oui.

    le 27/01/2017 à 16h17

  • patricerameaux

    patricerameaux

    le nom de la class et du sélecteur CSS semblent incorrects, pourtant que peut-il y avoir d'autre que blue ?

    le 25/09/2016 à 15h24

  • mram

    mram Administrateur

    Au lieu d'utiliser "h1" et "p" dans le CSS il faut utiliser la class".bleu" que vous avez indiqué dans le HTML.

    le 12/06/2017 à 14h44

  • mram

    mram Administrateur

    On demande d'ajouter la class "bleu" et non "blue" dans le HTML.

    le 28/09/2016 à 20h49

  • gespach

    gespach

    j'ai comme l'impression que j'ai un bug pour valider ma reponse, mon code html est : <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "class"</title> </head> <body> <h1 class= "blue";>Je suis un titre</h1> <p class= "blue";>Je suis un paragraphe.</p> </body> </html> mon code .css est: .blue { color: blue; }

    le 14/04/2016 à 14h34

  • mram

    mram Administrateur

    Bonjour, le nom de la class dans le fichier index.html est incorrect. Relisez l'énoncé. Il faudra aussi corriger le sélecteur css dans stylesheet.css qui lui aussi est incorrect.

    le 15/04/2016 à 01h02

  • andrade.meilyn-42

    andrade.meilyn-42

    et ça ne marche pas! je comprends pas c'est qui va pas, car le p et h1 sont en bleu .blue { color:blue; }

    le 28/05/2018 à 02h24

  • mram

    mram Administrateur

    Bonjour, il faut faire la différence ici entre le nom de la classe, qu'on a choisit d'appeler "bleu" et le code couleur qui lui est toujours en anglais.

    le 02/06/2018 à 04h12

  • clad91130-95

    clad91130-95

    je ne comprends pas l'erreur est de verifier les delimitations des cochets dans le css mais c'est deja fait un admin pourrai aider svp

    le 21/06/2018 à 21h00

  • mram

    mram Administrateur

    Bonjour, il faut utiliser la classe .bleu plutôt que le nom des balises dans les sélecteurs CSS.

    le 24/06/2018 à 06h52

  • laurent.radix

    laurent.radix

    Probleme résolu, merci

    le 31/01/2018 à 10h23

  • yannpeyrot1989

    yannpeyrot1989

    Bonjour je suis bloqué, voici mon code =:

    le 14/12/2017 à 10h46

  • mram

    mram Administrateur

    Bonjour, c'était une erreur dans le nom de la classe CSS.

    le 14/12/2017 à 21h50

  • belespoir38

    belespoir38

    Pourquoi ne pas mettre le selecteur CLASS à la suite de <body>, c'à d <body class="bleu" ?

    le 07/01/2018 à 16h23

  • mram

    mram Administrateur

    Bonjour, on peut aussi en effet, c'est d'ailleurs ce qui est indiqué dans l'énoncé à la fin.

    le 12/01/2018 à 01h21

  • marcromain77

    marcromain77

    help

    le 22/05/2018 à 20h13

  • mram

    mram Administrateur

    Bonjour, il faut mettre chaque règle CSS sur une ligne à part. Donc retour à la ligne après { après ; et après }

    le 28/05/2018 à 04h13

  • nad35

    nad35

    Bonjour, tout à l'air normal mais l'exercice n'est pas validé...On me dit "Vérifiez que vous avez le titre <h1> et son attribut "class" avec la valeur "bleu".,Vérifiez que vous avez le paragraphe <p> et son attribut "class" avec la valeur "bleu"., Vérifiez la syntaxe du sélecteur pour le titre <h1> et le paragraphe <p>.,Vous devriez avoir 2 éléments html avec la règle CSS "color: blue". Merci pour votre aide

    le 17/09/2018 à 10h26

  • mram

    mram Administrateur

    Bonjour, et oui "bleu" et pas "blue".

    le 02/10/2018 à 05h38

  • laurent.radix

    laurent.radix

    bonjour, je suis bloqué, le message suivant m'empêche la validation:Vérifiez la syntaxe du sélecteur pour le titre <h1> et le paragraphe <p>.

    le 30/01/2018 à 12h25

  • mram

    mram Administrateur

    Bonjour, vous avez des espaces inutiles après les accolades {

    le 30/01/2018 à 19h09

  • lemasle.morgan-98

    lemasle.morgan-98

    Bonjour, je ne comprends pas mon erreur je reçois ce message Vérifiez la syntaxe de votre balise <html>., Vous devriez avoir 2 éléments html avec la règle CSS "color: blue".

    le 02/08/2018 à 17h39

  • mram

    mram Administrateur

    Bonjour il ne suffit pas de mettre le code dans le fichier CSS, il faut aussi indiquer la classe CSS dans le HTML pour les balises concernées.

    le 13/08/2018 à 03h10

  • JUBERT.BRUNO0602

    JUBERT.BRUNO0602

    Voici ce qui m'a bloqué: la syntaxe seulement..je ne comprend pas la logique entre l'exemple d'avant et cet exercice. Dans l'exemple precedent on explique que sur la page html on peut ecrire class=green.. et dans cette exercice, nous devons ecrire bleu en francais .. ou est la logique ? s'il n'y en a pas je m'y ferai :)

    le 17/01/2018 à 16h38

  • mram

    mram Administrateur

    Bonjour, en effet il n'y a pas de règle à suivre. En CSS on peut donner le nom que l'on souhaite au class (en anglais, ou en français). Il y a différentes écoles avec chacune leur convention que l'on peut trouver sur internet. Par contre une class ne peut jamais commencer par un chiffre.

    le 19/01/2018 à 16h14

  • 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>