Utiliser la balise LINK pour lier une feuille de style CSS à une page HTML

Exercice 1/26

Dans le fichier index.html, retirez les balises de commentaires ‹!-- et --› autour de la balise ‹link› à la ligne 4 puis regardez ce que vous serez bientôt capable de faire en CSS !
Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 1/26

Regardez le fichier index.html. Plutôt standard, non ? Vous connaissez tout ça : titres, paragraphes, images, listes et tableaux.

Regardez le fichier stylesheet.css. Il contient toutes les informations de style CSS pour mettre en page les éléments HTML (leur position, leur couleur, leur taille, etc.).

Nous avons commenté une ligne cruciale (ligne 4) dans l'onglet index.html. Si vous enlevez les balises ‹!-- et --› au début et à la fin de cette ligne, vous verrez alors la magie du CSS opérer. Attention ! Ne supprimez surtout pas la balise ‹link›.

Commentaires les mieux notés

68 Commentaires

simed.kamal-63

le bouton soumettre ne donne rien . Aussi, la page de resultat ne s'affiche pas (503 service unavailable)

le 19/02/2023 à 12h55
Patricio M Admin

Simed, le site de mon coté fonctionne bien aujourd'hui

le 22/02/2023 à 08h11
jb.vs

access denied en lecture

le 21/05/2022 à 19h27
jb.vs

access denied an lecture

le 21/05/2022 à 19h27
meriam Admin

Bonjour, quel est votre problème exactement???

le 23/05/2022 à 23h54
jb.vs

liens des images morts, a update ?

le 21/05/2022 à 19h21
manon.henrip-30

bonjour, j'ai un petit soucis;j'ai pu réussir tout les exercices html jusque là, mais aucune image ne s'affichait correctement. je pensais que le problème venait des liens que je mettais pour les exos, or pour ce premier exercice de css aucune image est visible correctement :T (les cellules sont bien visibles mais j'ai pas d'images, juste l'icone comme quoi il doit bien y a voir une image), sauriez-vous si il me manque une extension à installer ou un quelconque paramètre à changer ? Merci :)

le 12/08/2021 à 21h17
meriam Admin

Bonjour , vérifiez la source de la l'image

le 13/08/2021 à 11h32
carine-74

Bonjour, j'ai un problème: je vois bien le résultat sauf les images, comment faire pour qu'elles soient visibles, à leurs places j'ai juste des icônes "image". merci beaucoup

le 25/06/2021 à 08h36
meriam Admin

bonjour, je ne vois aucun essai de votre part pour cet exercice .

le 25/06/2021 à 11h41
meriam Admin

il faut voir votre code pour pouvoir vous aider.

le 25/06/2021 à 11h53
@nt-one

Bonjour, depuis le début je ne vois pas le résultat malgré l'utilisation de plusieurs navigateur et retrait de différents paramétrage de sécurité

le 04/04/2021 à 18h35
meriam Admin

Bonjour, le problème persiste toujours??

le 05/04/2021 à 11h28
Hugo Tardieu

Bonjour, j'aimerais savoir pourquoi la validation "soumettre" ne fonctionne pas et ce pour plusieurs exercices alors que dans les commentairs on dit que le problème avait été réglé. Merci d'avance. ( sinon les cours sont bien sympathique ))

le 26/03/2021 à 16h08
meriam Admin

Bonjour, le bouton fonctionne correctement.

le 28/03/2021 à 20h17
matheolebontel-81

Soumettre ne fonctionne pas

le 16/03/2021 à 17h58
ilianetilian-83

Bonjour, quand je clique sur "Soumettre" rien ne se passe, j'ai réactualisé plusieurs fois mais rien ne change et c'est pareil pour les autres exercices. help

le 10/03/2021 à 08h42
meriam Admin

Bonjour, le problème est réglé.

le 10/03/2021 à 14h16
cyril_hoareau-99

Heureusement qu'il y a des éditeurs de code sur internet afin de constater le résultat car sa ne fonctionne pas ici

le 08/12/2020 à 06h22
meriam Admin

Bonjour, pour cet exerccie il suffit de supprimer le commentaire qui entoure la balise link.

le 09/12/2020 à 14h20
mokrane.yc-70

C'est bon, je viens de comprendre ! C'est après le "Soumettre" que l'effet est fisible.

le 23/10/2019 à 13h17
VUTHY

Grand merci a celui qui a creer ce site gratuit, quand tu pense de codeacademie est a partir de 30euros

le 19/07/2019 à 12h36
olivier-agueda-60

Si faut trouver l'intrus, j'ai trouvé c'est l'ewok ! MDR.

le 16/07/2018 à 18h42
lquentin008

j'aime ce site parce que cela me permet de parfaire mes connaissances,j'aimerai tout connaitre sur html5,css3,javascript,jquery,mysql et php

le 16/06/2017 à 12h22

Pour publier un commentaire, vous devez vous connecter.

stylesheet.css

index.html

body { background-color: #b7d1c4; } h2 { font-family: Verdana; font-weight: bold; text-align: center; padding-top: 25px; padding-bottom: 25px; color: #acd1b2; } img { height: 170px; width: 170px; box-shadow: rgba(0,0,0,0.2) 10px 10px; } #navbar { position: fixed; top:10px; left:50%; margin-left:-254px; } #header { position: relative; top: -10px; background-color: #3c4543; border-top-left-radius: 15px; border-top-right-radius: 15px; } ul{ list-style-type: none; position: fixed; margin: -10px; } li { display: inline; border: 2px solid #000000; font-family: Futura, Tahoma, sans-serif; color: #ffffff; padding: 5px; border-radius: 5px 5px; background-color: #cc0323 } #left{ width: 45%; float: left; } p { font-family: Tahoma; font-size: 1em; } #right{ width: 45%; float: right; } table { border: #000000 1px solid; background-color: #acd1b2; float: right; margin-right: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } td { height: 75px; width: 75px; } td img { height: 75px; width: 75px; box-shadow: none; } th { font-family: Verdana; font-size: 1em; font-weight: normal; color: #3c4543 } #bottom_left{ border-bottom-left-radius: 15px; } #bottom_right{ border-bottom-right-radius: 15px; } #footer{ clear: both; position: relative; bottom: -20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; height: 75px; background-color: #3c4543; } #button{ border: 2px solid #000000; float:left; position: relative; left: 229px; bottom: -20px; border-radius: 5px; background-color: #cc0323; height: 30px; width: 150px; } #button p{ position: relative; bottom: 10px; font-size: 0.8em; color: #acd1b2; text-align: center; } .bold{ font-family: tahoma; font-weight: bold; font-size: 1.2em; font-variant: small-caps; color: #ffffff; }

<!DOCTYPE html> <html> <head>  <title>Le voir, c'est le croire</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>Accueil</li> <li>A propos de moi</li> <li>Mon plan pour dominer le monde</li> <li>Contact</li> </ul> </div> <h2>A propos de moi</h2> </div> <div id="left"> <img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/> <p>Je suis le petit chien le plus méchant du monde. C'est un fait, prouvé scientifiquement.</p> </div> <div id="right"> <table> <tr> <th colspan="3">Mes potes</th> </tr> <tr> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td> </tr> <tr> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td> </tr> <tr> <td><img id="bottom_left" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td> <td><img id="bottom_right" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td> </tr> </table> </div> <div id="footer"> <div id="button"> <p>Envoyez-moi un <span class="bold">e-mail</span>!</p> </div> </div> </body> </html>

Activer JavaScriptJavaScriptJS

http://localhost:8080