Etape 1 : sélecteur de balise HTML
Dans un fichier HTML, écrire un texte entouré de la balise h1.
Réaliser une page CSS qui modifie votre balise h1 de la forme maBaliseHTML{} pour la mettre en vert .
Inclure le fichier CSS dans la section head de votre fichier HTML
Etape 2 : classe CSS et élément <span>
Dans un paragraphe, encadrer un mot par les balises span définissant une classe « bleu » puis créer une classe CSS bleu qui définit la couleur à bleu grâce à .maClasse{}
Etape 3 : police de caractère
Grâce au selecteur de balise body, charger des polices de caracteres comme gigi puis century si la premiere n’est pas trouvée grâce à font-family.
Modifier la taille de la police d’un mot du texte en 18pt.
Modifier la taille de la police de tout le texte (sauf le mot) grâce à font-size par 10px et tester.
Changer par 1em et tester.
Etape 4 : les marges
Définir une marge en haut de 10% et sur les cotés de 30% grâce à margin en une seule ligne.
Réaliser 3 paragraphes grâce à la balise HTML <p>. Ajouter une marge en haut grâce à margin-top de 15em pour cettte balise.
Etape 5 : liste
Prendre une recette, puis réaliser une liste grâce aux balises ul et li.
Modifier la couleur de fond de la balise ul par une couleur de votre choix.
Reproduire la meme chose avec une deuxieme recette et faire en sotre que les deux listes apparaissent seulement au passage de la souris.
Etape 6 : division
Realiser une division <div> en ajoutant un identifiant wiwi à cette balise pour le titre de vos recettes. Définir en CSS une couleur pour le fond de votre texte de balise div grâce à #wiwi{}
Appliquer une police uniquement pour la liste de la div grâce à #wiwi ul{}
Etape 7 : menu déroulant
Réaliser un menu déroulant sur le coté de votre page dans une balise nav. On utilisera des boutons de cette forme réalisée depuis un cadre noir et non une image:
Etape 8 : effet d’image
Inclure une image à votre recette. L’image sera zoomer au passage de la souris. Dans un premier temps, on zoomera de manière brute, puis avec un vrai zoom qui agrandie petit à petit l’image.
Etape 9 : image de fond
Définir une image de fond qui apparait en 3 secondes au passage de la souris.
Etape 10 : requête de media
Changer d’image de fond pour des définitions supérieures à 1024px. Tester éventuellement avec votre portable ou en changeant la taille de la fenêtre.