Exercice 5/26

  • Dans le fichier index.html, insérez un ‹link› vers stylesheet.css. Regardez l'astuce si vous avez besoin d'aide;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 5/26

Vous avez vu qu'on pouvait mettre le CSS dans la page HTML en utilisant les balises ‹style›‹/style›. Mais il y a un autre moyen, beaucoup plus pratique.

Vous savez que vous devez écrire votre CSS dans un fichier à part. Mais comment être sûr que le fichier HTML aura accès aux informations de style contenues dans le fichier CSS ?

Grâce à une balise ‹link› (comme vous l'avez vu dans les premiers exercices de ce cours) insérée entre les balises ‹head›‹/head› de votre page HTML. Votre balise ‹link› a besoin de trois attributs :

  • Un attribut type qui doit toujours être égal à "text/css".
  • Un attribut rel qui doit toujours être égal à "stylesheet"
  • Un attribut href qui doit pointer vers l'adresse internet de votre fichier CSS.

Dans l'éditeur à droite, vous pouvez voir deux fichiers : index.html et stylesheet.css.

La syntaxe complète pour relier votre fichier CSS à votre fichier HTML doit ressembler à ça :

‹link type="text/css" rel="stylesheet" href="stylesheet.css" /›

Si vous avez un nombre étrange pour la taille de police, remettez le zoom de votre navigateur par défaut en tapant Ctrl-0 ou Cmd-0.

Commentaires les mieux notés

65 Commentaires

  • chateau.kelly1-71

    chateau.kelly1-71

    Bonjour, je ne comprend ce qui ne marche pas dans mon code : <link type="text/css" rel="sylesheet" href="stylesheet.css" /> ça me dit : "Vous devez ajouter l'attribut rel à votre balise <link>"

    le 04/02/2023 à 10h29

  • Patricio M

    Patricio M Admin

    Kelly, ton code est OK

    le 06/02/2023 à 15h25

  • Rubis.daisuki-69

    Rubis.daisuki-69

    Hola, <link type="text/css" rel="stylesheet" href="slylesheet.css" /> pourquoi ça ne marche pas s'il vous plait =(

    le 08/03/2022 à 20h49

  • meriam

    meriam Admin

    Bonjour, vous devez corriger la valeur de href.

    le 10/03/2022 à 15h19

  • Tiphaine.juquel-27

    Tiphaine.juquel-27

    Bonjour, comme lors de l'exercice précédent, j'ai un soucis alors que le code est bon. Je ne peux pas soumettre l'exercice

    le 27/11/2021 à 13h55

  • meriam

    meriam Admin

    Bonjour, merci de préciser votre problème.

    le 28/11/2021 à 23h36

  • louisebrunet1-50

    louisebrunet1-50

    Pouvez vous m'aider svp, ca me bloque dans mon avancement.Merci.

    le 27/11/2021 à 13h27

  • meriam

    meriam Admin

    Bonjour, quel est votre problème?

    le 28/11/2021 à 23h33

  • louisebrunet1-50

    louisebrunet1-50

    Bonjour, depuis le début de cette session lorsque je soumets mes réponses je reçois ce message d'erreur : "Votre balise DOCTYPE est incorrecte. Avez-vous écrit ceci : <!DOCTYPE html> ?"

    le 27/11/2021 à 13h26

  • meriam

    meriam Admin

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

    le 28/11/2021 à 23h03

  • caris.alain-44

    caris.alain-44

    en faisant un copier-coller à partir de "Astuces" : ça ne fonctionne pas. Mais en retapant exactement le même texte manuellement, ça fonctionne ... ‹link type="text/css" rel="stylesheet" href="stylesheet.css" /›

    le 02/11/2021 à 11h13

  • meriam

    meriam Admin

    Bonjour, pour les chevrons < >, il faut les taper au lieu de les coller.

    le 08/11/2021 à 00h36

  • julien.blacteau-1

    julien.blacteau-1

    Je ne comprend pas pourquoi ça ne fonctionne pas...

    le 26/10/2021 à 20h28

  • meriam

    meriam Admin

    Bonjour, les chevrons de la balise < > sont mal écrits.

    le 27/10/2021 à 10h49

  • valypierre-30

    valypierre-30

    je n'y arive pas pourquoi

    le 09/06/2021 à 09h32

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 09/06/2021 à 16h56

  • v.boidron-67

    v.boidron-67

    Vous m'écrivez que le link doit de préférence être après la logne de titre, pourtant il est systématiquement avant dans vos exercices ?

    le 04/05/2021 à 10h20

  • meriam

    meriam Admin

    Bonjour, j'ai dit de préférence qu'il soit aprés le titre.

    le 04/05/2021 à 13h17

  • meriam

    meriam Admin

    J'ai pas dit que c'est faux.

    le 04/05/2021 à 13h17

  • v.boidron-67

    v.boidron-67

    J'ai deux questions : apparemment la ligne de lien peut se situer avant ou après la ligne de titre ? Ensuite, appremment la ligne de lien est toujours la même ? suffit il à chaque fois que l'on veut lier html à une feuille css de faire un copier coller de la ligne de lien ‹link type="text/css" rel="stylesheet" href="stylesheet.css"/>

    le 26/04/2021 à 09h13

  • meriam

    meriam Admin

    Bonjour, oui le link peut être avant ou aprés , mais de préférence qu'il soit aprés. Ce qui change pour pour le link c'est la valeur de href (tout dépend de l'emplacement)

    le 28/04/2021 à 11h06

  • anthonyveillet21-65

    anthonyveillet21-65

    bonjours je ne comprend absolument pas votre exercice

    le 22/03/2021 à 10h04

  • meriam

    meriam Admin

    Bonjour, vous devez lier le fichier html et le fichier css, pour cela, vous devez insérer la balise link à l'intérieur de la partie head : <link type="text/css" rel="stylesheet" href="stylesheet.css" />"

    le 22/03/2021 à 10h25

  • deva_acarbas-47

    deva_acarbas-47

    Bonjour , ma réponse , ne se soumet pas cela fait 20 min que j'y suis

    le 16/03/2021 à 14h55

  • meriam

    meriam Admin

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

    le 17/03/2021 à 11h35

  • deva_acarbas-47

    deva_acarbas-47

    celui qui trouve la réponse , merci de l'écrire ici c'est imcompréhensible mdrrr

    le 16/03/2021 à 14h51

  • meriam

    meriam Admin

    Bonjour, vous devez refaire les chevrons < et > de la balise link ==> <link type="text/css" rel="stylesheet" href="stylesheet.css"

    le 17/03/2021 à 09h27

  • Tolga-16

    Tolga-16

    <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Faites la paire : liez CSS et HTML</title> </head> <body>

    le 01/03/2021 à 18h38

  • meriam

    meriam Admin

    Votre code est correct.

    le 02/03/2021 à 14h25

  • Tolga-16

    Tolga-16

    c'est chaud mdr qui a la reponse ?

    le 01/03/2021 à 18h33

  • meriam

    meriam Admin

    Votre code est correct.

    le 02/03/2021 à 14h25

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <title>Faites la paire : liez CSS et HTML</title> </head> <body> <p>Je veux être de police taille 44 !</p> </body> </html>
p { font-size: 44px; }