Exercice 10/20

  • Dans le fichier index.html, ajoutez l'attribut id aux trois éléments HTML;
  • Pour chacun des trois attributs, donnez respectivement les valeurs "title","par1","par2"
  • Dans le fichier stylesheet.css, ajoutez les trois sélecteur id correspondant aux éléments HTML;
  • Attribuez au sélecteur #title la propriété color et sa valeur red;
  • Attribuez au sélecteur #par1 la propriété color et sa valeur green;
  • Attribuez au sélecteur #par2 la propriété color et sa valeur blue;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 10/20

Le sélecteur **id** est utile quand vous souhaitez appliquer un style à un seul et unique élément HTML.

Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une seule fois sur un site web.

La syntaxe dans le fichier HTML est la suivante :

‹h1 id="NomIdUnique"›‹/h1›   

Dans le fichier .css, le sélecteur id s'écrit comme ceci :

#NomIdUnique {
    color: red;
}

N'oubliez pas le dièse "#" devant le nom de votre id.

Commentaires les mieux notés

46 Commentaires

  • peche.melodie-45

    peche.melodie-45

    Lorsque je veux "soumettre" il y a marqué cela:Votre balise DOCTYPE est incorrecte. Avez-vous écrit ceci : <!DOCTYPE html> ?

    le 26/11/2021 à 12h05

  • meriam

    meriam Admin

    Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.

    le 28/11/2021 à 23h02

  • Aurélie Gendre

    Aurélie Gendre

    C'est bon j'ai trouvé mon erreur. J'avais rajouté un t à par. Il faut vraiment faire attention aux détails.

    le 25/03/2021 à 20h11

  • meriam

    meriam Admin

    N'hésitez pas à poser des questions si vous trouvez des problèmes dans les exercices qui suivent. Bon travail.

    le 26/03/2021 à 11h50

  • Aurélie Gendre

    Aurélie Gendre

    voici mon code html : <h1 id="title">Je suis un titre unique</h1> <p id="part1">Je suis un paragraphe unique.</p> <p id="part2">Je suis un autre paragraphe unique.</p>

    le 25/03/2021 à 19h57

  • Aurélie Gendre

    Aurélie Gendre

    voici mon code css : #title&#123; color:red; } #part1&#123; color:green; } #part2&#123; color:blue; }

    le 25/03/2021 à 19h56

  • meriam

    meriam Admin

    Bonjour, pour l'id par1 5 (vous devez supprimez la lettre t , de même pour le 2 ème id)

    le 26/03/2021 à 11h51

  • Aurélie Gendre

    Aurélie Gendre

    Bonsoir je ne comprends pas où se situe mon erreur. Voici le message d'erreur reçu :"Votre première balise p a doit contenir la bonne valeur pour l'attribut id (par1)"

    le 25/03/2021 à 19h53

  • meriam

    meriam Admin

    par1 et non pas part1 ;

    le 26/03/2021 à 11h52

  • loutchay-74

    loutchay-74

    Bonjour, je ne saisie pas le sens de la question dès que je soumets: Votre balise h1 a doit contenir du texte.

    le 09/08/2020 à 15h57

  • meriam

    meriam Admin

    Bonjour, votre code html n'est pas correct. Ce code peut vous ider : <h1 id="title">Je suis un titre unique</h1> <p id="par1">Je suis un paragraphe unique.</p> <p id="par2">Je suis un autre paragraphe unique.</p>

    le 10/08/2020 à 07h12

  • nkeshimanabrice-37

    nkeshimanabrice-37

    pouvez-vous valider l'exercice...

    le 29/10/2018 à 12h20

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok merci

    le 26/10/2018 à 10h03

  • vfaiola-21

    vfaiola-21

    hello, je ne vois pas mon erreur ;-) merci d'avance. Je vois bien 3 blocs &#123;}

    le 24/07/2018 à 16h00

  • mram

    mram Admin

    Bonjour, le code lignes 7 à 9 et 13 à 15 sont inutiles.

    le 01/08/2018 à 01h31

  • raphael.gouin-37

    raphael.gouin-37

    ok merci c'est bon !

    le 14/06/2018 à 14h04

  • raphael.gouin-37

    raphael.gouin-37

    Vérifiez la syntaxe du sélecteur pour le premier paragraphe <p>.

    le 11/06/2018 à 07h50

  • mram

    mram Admin

    Attention aux espaces inutiles en fin de ligne. Et aussi, les deux premières accolades } doivent être positionnées comme la dernière.

    le 13/06/2018 à 00h37

  • raphael.gouin-37

    raphael.gouin-37

    Bonjour, je souhaiterais savoir si j'ai fait une erreur ligne 9 ou si un bug fait que je ne peux valider l'exercice. Merci !

    le 25/05/2018 à 15h44

  • mram

    mram Admin

    Bonjour, que vous dit le message d'erreur ?

    le 28/05/2018 à 01h17

  • millelire.jo

    millelire.jo

    Bonjour, je ne comprend pas ou est mon erreur...

    le 07/05/2018 à 11h00

  • mram

    mram Admin

    Bonjour, le nom de l'id pour les paragraphe n'était pas le bon. Attention à la syntaxe.

    le 13/05/2018 à 22h03

  • franckferdinand-84

    franckferdinand-84

    (Re-)bonjour Mram, pas trop de soucis pour l'éxercice cependant il y a une chose qui n'est pas clair, il est bien spécifié "Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une seule fois sur un site web." Or nous l'utilisons deux fois ici pourtant (sur les 2 "p" j'entend...et même sur un h ! D'ou ma question suivante..). En quoi cela serait faux de remplacer ces deux "id" par deux "class" ? ou bien faire un id, un class..et re un id par éxemple ? La difference entre les deux n'est pas évidente a cerner je dois avouer. Merci d'avance pour vos réponse :)

    le 14/03/2018 à 00h36

  • mram

    mram Admin

    Bonjour, non on utilise pour chaque "p" un id différent et donc unique. Chaque id doit être appliqué à une seule balise HTML, c'est le cas ici. On pourrait très bien remplacer chaque id par une class. Mais une class à pour vocation à être réutiliser par plusieurs balises HTML, si elle n'est utilisée qu'une seule fois, autant mettre un id alors.

    le 16/03/2018 à 03h05

  • andrewedina-29

    andrewedina-29

    y a un petit bug sur l'exercice non ? la je vois pas où est l'erreur !!

    le 12/02/2018 à 17h05

  • mram

    mram Admin

    Bonjour, votre code est fonctionnel, mais on demande d'utiliser les sélecteurs "par1" et "par2" et non "part1" et "part2" .

    le 12/02/2018 à 20h31

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