Exercice 9/16
- Mettez le titre en vert (green) avec une taille de 16 pixels (16px)
- Mettez le premier paragraphe en violet (purple).
- Mettez le second paragraphe en rouge (red) avec une taille de 8 pixels (8px)
Leçon 9/16
L'attribut style est un peu magique : il admet une grande variété de valeurs et peut s'associer à la plupart des balises HTML. Par exemple, essayons de changer la couleur d'un titre.
La propriété CSS qui nous intéresse cette fois n'est plus font-size mais color. Pour attribuer la couleur verte, il faudra lui donner la valeur "green" ("vert" en anglais), ce qui donnera color:green.
Ajoutez dans la balise ouvrante l'attribut style suivi du signe = puis tapez color:blue entre guillemets. Par exemple :
<h2 style="color:orange">
Si on veut changer à la fois la couleur ET la taille du texte, il n'est pas nécessaire de rajouter un attribut style : il suffit de séparer les deux propriétés par un point-virgule . Par exemple :
<h2 style="color:blue;font-size:14px">
Faites votre choix dans la liste des couleurs disponibles en HTML.
_
Tout le contenu de l'attribut style (sa valeur) doit se trouver entre guillemets (à la droite du signe =).
Entre chaque élément de style (couleur, taille) placez un point-virgule.
Si vous avez une valeur anormale pour la taille de police, essayez de remettre le zoom de votre navigateur par défaut en tapant Ctrl + 0 ou Cmd + 0.
_
Commentaires les mieux notés
deuxs-95
kevinsurya.girault-84
Pour valider l'exercice il me faut mettre : balise <h2> : green, même couleur green pour la balise <p> n°1 et purple pour la n°2. Il faut modifier l'énoncé ou déboguer l'exercice.
dams
bonjour, je suis bloqué, je ne trouves pas mon erreur
mram Administrateur
Ligne 5, la balise "title" ne doit pas posséder de style, elle n'est pas faite pour.
94 Commentaires
deuxs-95
Bonjour, pourriez-vous vérifier le code svp : j'ai pourtant bien indiqué front-siez dans h2 puisque cela s'affiche ! Mercile 27/08/2018 à 12h37
mram Administrateur
Bonjour, non vous avez mis "front-size" et non "font-size"...
le 05/09/2018 à 06h17
dams
bonjour, je suis bloqué, je ne trouves pas mon erreurle 22/10/2016 à 15h00
mram Administrateur
Ligne 5, la balise "title" ne doit pas posséder de style, elle n'est pas faite pour.
le 24/10/2016 à 13h31
licorne66
bonjour à tous: On me dit de mettre une seule balise <h2> se que j'ai fais pour chacune des lignes, je ne comprends pas mon erreur ? merci de votre aide.le 09/05/2017 à 19h35
mram Administrateur
LIgnes 9 et 10 il ne faut qu'une paire de guillemets pour contenir tout le code CSS.
le 09/03/2017 à 01h12
mram Administrateur
Bonjour, non dans votre code vous avez 3 balise "h2". Il n'en faut qu'une et une balise s'écrit toujours ainsi : <h2>blablbala</h2>
le 15/05/2017 à 13h25
florian.giannico2501
Bonjour, je ne comprend pas mon erreur alors que j'ai bien suivie les instructionsle 08/03/2017 à 19h58
walidmih
Instructions Mettez le titre en vert (green) avec une taille de 16 pixels (16px) --> sa veux dire h2 parceque on peut pas faire le style a la balise <title>le 23/03/2017 à 00h00
mram Administrateur
Tout à fait, il s'agit des balises de type h1, h2, h3, etc.
le 24/03/2017 à 10h40
jenebakone
Bonjour,effectivement il serait bien de modifier l 'énoncé car il nous est demandé de mettre un style à "title" alors qu'il s'agit de "h2". Cependant le message d'erreur nous permets de corriger ce malentendu et de valider l'exercice.le 05/10/2016 à 16h34
Magalislk
Trop de bugs je retourne sur code academy...le 22/06/2016 à 15h26
mram Administrateur
Ce ne sont pas des bugs, il y a une erreur dans votre code dans cet exercice : il faut des points-virgule pour séparer les propriétés css...
le 22/06/2016 à 16h12
mram Administrateur
Regardez comment c'est écrit dans l'énoncé pour vous aider.
le 22/06/2016 à 16h13
mram Administrateur
Attention, ne pas confondre <h1> qui est un titre quand-même, mais qui n'a rien à voir avec la balise "title". Dans l'énoncé on précise le titre, sous-entendu le "h1".
le 05/10/2016 à 21h15
lucas_68_-98
bonjour, je ne comprends pas: Votre première balise <p> a une color vide ! Exemple : <p style="color:red">contenu</p>. (et j'ai bien mis en anglais)le 02/09/2018 à 20h40
mram Administrateur
Bonjour, attention vous ouvrez deux fois les balises "p".
le 10/09/2018 à 03h30
mehdialami229
Ou est mon erreur?le 20/08/2017 à 17h58
mram Administrateur
Bonjour, c'était pas le bon niveau de titre.
le 22/08/2017 à 13h35
ingushsamad
aidez moi svp je comprend pas je doit mettre un deuxieme <p>le 01/01/2018 à 06h43
mram Administrateur
Bonjour, oui il faut mettre un deuxième "p" en dessous de l'autre et non à l'intérieur. Il ne faut pas deux "p" imbriqués l'un dans l'autre.
le 06/01/2018 à 19h07
servicecommunication.semaphore-42
pourquoi ça marche pasle 21/09/2018 à 14h18
meriam Administrateur
la balise title ne doit pas contenir l'attribut style
le 01/10/2018 à 17h53
paulmiget0803-41
Bonjour, je ne vois pas où je me suis tromper :<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3WA learning - Les couleurs</title> </head> <body> <h2 style="font-size: 16px;color:green">Le progrès</h2> <p style="font-size: 12px;color:purple">Autrefois les écrans étaient monochromes</p> <p style="font size: 10px;color:red">Puis, un jour, la couleur fit son apparition</p> </body> </html>le 05/08/2018 à 13h38
mram Administrateur
Bonjour, que vous dit le message exactement ?
le 13/08/2018 à 03h21
triplaxs
Et il vrais que l'on devrai faire cela dans un fichier css séparer que l'on vas nomé srtyle css que l'on lira a notre fichier HTLM ?le 20/07/2017 à 18h35
mram Administrateur
Oui, vous le verrez dans les exercices qui suivent.
le 23/07/2017 à 16h30
severine.74
merci!le 01/02/2018 à 22h29
veronique.nollet
Bonjour, mon titre n'apparaît pas en vert et la taille ne se modifie pas alors que pour les paragraphes, c'est ok. Je ne comprends pas.le 13/03/2018 à 14h00
mram Administrateur
Bonjour, il faut mettre le CSS à la balise "h1" et non "title" qui sert juste à afficher le titre de la page dans l'onglet navigateur et les résultats de recherche.
le 16/03/2018 à 04h55
wardainf-20
Bonsoir, la syntaxe est correcte mais tj il affiche erreurle 11/08/2018 à 21h58
mram Administrateur
Quel est votre message d'erreur svp ? Ca sera plus facile pour vous aider.
le 17/08/2018 à 05h51
sisix1-56
j'ai un problème mon titre j'ai pas tros comprisle 15/03/2018 à 18h51
mram Administrateur
Bonjour, on ne met jamais de CSS à la balise "title", et vous avez oublié de fermer la balise "title".
le 16/03/2018 à 05h18
michelperard83
Bonjour, je ne vois pas du tout mon erreur dans ce code : <body> <h2><p style="color:green;font-size:16px">Le progrès</h2> <p><p style="color:purple">Autrefois les écrans étaient monochromes</p> <p><p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p> </body>le 14/09/2017 à 19h53
mram Administrateur
Bonjour, il ne faut pas mettre deux fois <p> c'est inutile. Et le titre <h2> n'est pas fermé.
le 20/09/2017 à 14h38
julien-demaria
Bonjour je ne comprends pas mon erreurle 27/07/2017 à 15h52
mram Administrateur
Bonjour, il manquait la propriété "font-size" dans votre code.
le 01/08/2017 à 12h10
sarrabj20-78
Bonjour. Je ne comprends pas mon erreurle 27/07/2018 à 01h05
mram Administrateur
Bonjour, la balise "title" ne doit contenir que du texte.
le 02/08/2018 à 05h06
robotoreo3-77
bonsoir, il me dit qu'il faut deux balises <p>, je ne comprend pasle 13/06/2018 à 22h01
mram Administrateur
Bonjour,
Lignes 9 et 10, vous ouvrez 2 fois la balise "p". Pourquoi ?
le 19/06/2018 à 04h39
audebertt-85
Bonjour, est-ce correcte? on me dit qu'une seule balise h2 est nécessaire <h2> <h2 style="color:green;font-size:16px">Le progrès</h2> <p> <h2 style="color:purple">Autrefois les écrans étaient monochromes</p> <p> <h2 style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p>le 26/03/2018 à 14h27
mram Administrateur
Bonjour, non ce n'est pas correct, vous aviez plusieurs balises h2 dans votre code, d'où l'erreur. Relisez bien votre code avant.
le 28/03/2018 à 06h19
ndiaye.ahmad.mansour-35
Bonsoir j'arrive pas a voir mon erreur pouvez-vous vérifier le code svpl quand je met soumettre il me dit que je doit avoir 3 balise <p>dans le bodyle 26/04/2019 à 00h23
meriam Administrateur
Bonjour, je vois dans votre code, des balises ouvrantes p supplémentaires .
le 26/04/2019 à 11h54
mael93-75
quand je met front-size on me dit que c faux et quand je met font-size on me dit que c justele 15/09/2018 à 16h12
mram Administrateur
Bah oui, la propriété c'est "font-size" et pas "front-size" ...
le 16/09/2018 à 08h40
nathyde
Bonjour, voici ce que l'on me dit "Votre deuxième balise <p> a une font-size vide ! Exemple : <p style="font-size:12px">contenu</p>". Pourtant, ma font size n'est pas vide...le 07/01/2018 à 14h43
mram Administrateur
Bonjour, il ne faut pas utiliser " = " mais " : " entre le nom de la propriété et la valeur.
le 12/01/2018 à 01h16
edouarddecourcelle-62
votre site ne marche pas je code en html sur sublimetext sa marche sans problème ici sa ne fais que de me dire qu'il y a une erreur...le 13/08/2018 à 12h06
mram Administrateur
L'exercice fonctionne très bien. Votre code contient des erreurs.
Un titre et un paragraphe sont deux éléments distincts, pourquoi mettre les deux paragraphes dans un titre "h2" ?
Le seul titre qu'il faut est celui ligne 8.
le 17/08/2018 à 06h05
tounsydu0069
bonjour je ne comprend pas mon erreur..le 05/07/2017 à 15h24
mram Administrateur
Bonjour, j'ai testé votre code et j'ai pu valider l'exercice ...
le 07/07/2017 à 11h55
ambre.naude
Bonjour, je ne comprends pas mon erreur, "Votre première balise <p> a une color vide ! Exemple : <p style="color:red">contenu</p>" alors que le texte est bien en couleur en dessous... Merci pour votre aidele 08/01/2018 à 13h21
mram Administrateur
Bonjour, il faut mettre le nom des couleurs en anglais et non en français.
le 12/01/2018 à 01h39
vadim.olivan-96
<h2 style="color:orange;fontsize:16px">Le progrès</h2> et on me dit qu'il manque la propriété fontsizele 22/02/2018 à 13h34
vadim.olivan-96
c'est bon, j'ai oublié le -le 22/02/2018 à 13h35
augauci
bonjour je ne comprend pas mon erreurele 19/12/2017 à 17h22
mram Administrateur
Bonjour, 16xp, 8xp ce n'est pas la bonne unité. Il faut utiliser px ( pixels ) . Et dans vos paragraphes "p" il ne doit pas y avoir de titres "h2" .
le 23/12/2017 à 16h25
ronangarnier
Bonjour je ne vois pas mon erreur "Il manque la propriété font-size dans l'attribut style de votre balise <h2> !"le 08/09/2017 à 15h10
mram Administrateur
Bonjour, attention aux guillemets. Il n'y a qu'un seul couple de guillemets : style="..." et toutes les propriétés doivent être dedans.
le 12/09/2017 à 16h18
severine.74
Bonjour. Je ne comprends pas mon erreur, on me dit qu'une seule balise h2 est nécessaire, mais si je n'en mets qu'une sur la ligne 8, je ne peux plus mettre les autres lignes en couleurle 27/01/2018 à 09h11
mram Administrateur
Bonjour, dans l'énoncé on parle de paragraphes également, il n'y a bien qu'une seule balise "h2" à mettre. Les autres sont des "p".
le 30/01/2018 à 18h36
diallolamine55
bonjour ,on me dit de mettre une seul balise h2...et je crois ne pas faire d'erreurle 10/07/2017 à 17h58
mram Administrateur
Bonjour, juste après "body" vous ouvrez deux fois la balise "h2" ...
le 10/07/2017 à 18h05
steve.besson
je ne vois pas ou est l'erreur non plusle 09/11/2017 à 18h06
mram Administrateur
Bonjour, il ne doit y avoir qu'un seul couple de guillemets : style="..."
le 11/11/2017 à 14h51
bobbysix-52
Deux balises <p> sont nécessaires !le 02/10/2018 à 13h11
meriam Administrateur
la ligne 6 est inutile, si non le reste est correcte
le 04/10/2018 à 17h57
francelinloic
Bonjour je n'arrive pas a trouer mon erreurs, ils me disent que 2 balise <p> sont néccesairesle 11/09/2017 à 16h47
mram Administrateur
Bonjour, pourquoi mettre deux fois <p><p></p></p> ?? Un seul couple de balise ouvrante / fermante suffit.
le 12/09/2017 à 17h28
killian.pas-52
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3WA learning - Les couleurs</title> </head> <body> <h2 style="color:green;font-size:16px">Le progrès</h2> <p style="color:purple">Autrefois les écrans étaient monochromes</p> <p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p> </body> </html>le 16/05/2019 à 19h02
hakima.danse-79
cela marche avec le code suivant <h2 style="color:green; font-size:16px">Le progrès</h2> <p style="color:purple">Autrefois les écrans étaient monochromes</p> <p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p>le 20/05/2019 à 15h00
eh1307-61
Désolé , j'ai trouvé mon erreur j'ai mis 14px au lieu de 10px comme annoncé dans l'exercicele 03/04/2019 à 22h33
arianecheng-40
J'ai bien fait et réussi. Mais il affiche que je dois avoir 3 balises <p> dans <body> !???le 20/08/2019 à 00h33
takfa
j'ai trouver lerreur mercile 17/10/2019 à 23h14
Bonjour, pourriez-vous vérifier le code svp : j'ai pourtant bien indiqué front-siez dans h2 puisque cela s'affiche ! Merci