yanntyb / exo-26-css-tailles

Exo-26-CSS-Tailles

1. Créez une nouvelle page HTML dans les règles de l'art, n'oubliez pas votre balise title dans le head !

2. Créez une feuille de style et ajoutez y des règles de base

Règles de base

1. Couleur de texte : corail

2. Pas de soulignement pour les liens

3. Couleur des liens : au choix, mais doit trancher avec la couleur du texte

4. Ajoutez une ombre portée aux paragraphes ayant la classe shadow, libre choix du type d'ombre et de la technique utilisée

5. Le texte d'un élément de liste non ordonnée sur deux doit être en italique et pas en gras, libre choix de la technique

6. Le texte d'un élément de liste non ordonnée sur deux doit être en gras mais pas en italique, libre choix de la technique

7. Les paragraphes devront avoit une marge extérieure aux 4 coins de 15px

8. Les paragraphes devront avoir une marge intérieure aux 4 coins de 20px

9. Le texte de chaque paragraphe devra être indenté

10. Vos liens devront apparaitre au bord suppérieur du texte qu'il suit directement !

Règle supplémentaire non vue en cours

1. Créez une classe .cadre

2. Assignez la règle suivante que nous verrons plus tard --> border: 1px solid black;

3. Cette classe devra donner aux éléments qui l'utilisent une largeur de 500px et une hauteur de 300px, même si ca déborde !

Elements HTML à retrouver dans votre code

1. 5 paragraphes avec du texte ( lorem autorisé )

2. Les paragraphes doivent être regroupés par deux dans un bloc quand c'est possible, les blocs doivent avoir la classe .cadre

3. Deux des paragraphes ou un groupement de texte supplémentaire doivent avoir une ombre portée ( celle définie en css )

3. Un lien dans chaque paragraphe

4. Une liste non ordonnée avec du texte au choix

Bonus

1. Utilisez toutes les classes que nous venons de voir pour donner un style plus élégant tout en respectant les consignes de base de l'exo.

2. Ajoutez une image et faites la tenir en haut à droite de votre page !

3. Changez le type de puces de votre liste ordonnées en utilisant une puce aux choix proposée par défaut en css

4. Changez le style du curseur pour qu'il affiche une main au survol des liens ( a:hover {...}  que nous verrons très vite ! )