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

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok merci

    le 26/10/2018 à 14h03

  • nkeshimanabrice-37

    nkeshimanabrice-37

    pouvez-vous valider l'exercice...

    le 29/10/2018 à 14h20

  • pizzutoandrea3

    pizzutoandrea3

    aidee

    le 07/06/2017 à 00h18

  • celia-huart

    celia-huart

    Comme l'exercice précèdent, je ne comprend pas mon erreur de syntaxe, et cela en rajoutant des ";" ou des espaces etc. <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "id"</title> </head> <body> <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> </body> </html> #title &#123;color: red;} #par1 &#123;color: green;} #par2 &#123;color: blue;}

    le 01/01/2017 à 11h30

  • mram

    mram Admin

    Même remarque, le code est correct mais pas écrit comme souhaité. Regardez l'exemple de code dans la description de l'exercice.

    le 02/01/2017 à 14h49

20 Commentaires

  • nkeshimanabrice-37

    nkeshimanabrice-37

    pouvez-vous valider l'exercice...

    le 29/10/2018 à 14h20

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok merci

    le 26/10/2018 à 14h03

  • vfaiola-21

    vfaiola-21

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

    le 24/07/2018 à 20h00

  • mram

    mram Admin

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

    le 01/08/2018 à 05h31

  • raphael.gouin-37

    raphael.gouin-37

    ok merci c'est bon !

    le 14/06/2018 à 18h04

  • raphael.gouin-37

    raphael.gouin-37

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

    le 11/06/2018 à 11h50

  • 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 à 04h37

  • 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 à 19h44

  • mram

    mram Admin

    Bonjour, que vous dit le message d'erreur ?

    le 28/05/2018 à 05h17

  • millelire.jo

    millelire.jo

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

    le 07/05/2018 à 15h00

  • mram

    mram Admin

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

    le 14/05/2018 à 02h03

  • 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 à 02h36

  • 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 à 05h05

  • 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 à 19h05

  • 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 à 22h31

  • steve.besson

    steve.besson

    Et pour pourquoi on n'attribut pas "style="color:blue"" directement dans le HTML puisque ca en sert qu'une fois ?

    le 11/11/2017 à 15h04

  • mram

    mram Admin

    Bonjour, oui c'est possible mais il est préférable de séparer la structure HTML de la mise en page CSS. Donc il est recommandé de mettre toutes les règles de style dans un fichier .css à part.

    le 12/11/2017 à 00h14

  • khalidb

    khalidb

    il y a pas mal de bug sur certain exercises perd de temps defois cest bon et sa valide pas bon

    le 01/11/2017 à 22h38

  • mram

    mram Admin

    Bonjour, il ne faut pas de point "." dans le nom de class et id .

    le 04/11/2017 à 00h02

  • mram

    mram Admin

    Votre code est à priori bon. Quelle erreur avez-vous ?

    le 12/06/2017 à 14h46

  • pizzutoandrea3

    pizzutoandrea3

    aidee

    le 07/06/2017 à 00h18

  • mram

    mram Admin

    Même remarque, le code est correct mais pas écrit comme souhaité. Regardez l'exemple de code dans la description de l'exercice.

    le 02/01/2017 à 14h49

Pour publier un commentaire, vous devez vous connecter.
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>
http://localhost:8080