Sur base de votre exercice précédent, créez un nouveau site avec:

• Création d'un site web de 3 pages minimum avec un menu de navigation permettant, à partir de chacune des pages, d'accéder à toutes les autres. (Vous pouvez repartir de votre exercice précédent bien entendu)
• Ajout d'une feuille de style externe (CSS)
• Chacun de vos fichiers HTML doit être lié à cette même feuille de styles
• Ajoutez au moins 3 règles CSS (ciblant 3 éléments différents de vos pages)
• Chaque règle doit comporter au moins 2 déclarations (paires propriété-valeur).. Faites vos recherches en fonction de ce que vous voulez modifier. La recherche sur le web fait partie du travail (pour trouver l'une ou l'autre propriété css, comment faire ceci ou cela..)
• Testez
• Mettez le tout en ligne sur Netlify.
• Testez encore (le contexte a changé)
• Copiez l'adresse de votre page dans ce fichier, à hauteur de votre nom (que vous prendrez soin de noter), et dans la colonne adéquate, correspondant à l'exercice.

Retour sur Inline, block, div et span

Lier une feuille de styles à votre fichier HTML

Pour vous aider...

Les différentes façons de cibler tel ou tel élément de votre page sont reprises ci-dessous. Mais nous verrons cela à notre aise lors du prochain cours.

/* On cible les paragraphes (P) */
p {
    color:#333;
}

/* On cible les éléments SPAN qui sont dans un paragraphe */
p span {
    color:red;
}

/* On cible les paragraphes avec la classe INTRODUCTION */
p.introduction {
    color:blue;
}

/* On cible les éléments (quels qu'ils soient) avec la classe INTRODUCTION */
.introduction {
    /* propriétés */
}
/* On cible les éléments SPAN qui sont dans un élément(quel qu'il soit) avec la classe INTRODUCTION */

.introduction span {
    /* propriétés */
}

/* On cible les liens qui sont dans des LI, qui sont dans des UL (c'est généralement le cas) */
ul li a {
    /* propriétés */
}

/* On cible les liens survolés qui sont dans des LI, qui sont dans des UL */
ul li a:hover {
    /* propriétés */
}
/* On cible les images */
img {
    opacity:0.9;
}

/* On cible les images survolées */
img:hover {
    opacity:1;
}
/* On masque un élément qui a la classe "cacher"(par exemple..) */
.cacher {
    display:none;
}