Exercice 1: styler tous les éléments d'un même type.

1. On veut "styler" la page afin d'obtenir les effets suivants (voir figure 2):

 un fond simulant un effet parchemin,

 tous les titres de niveau 1 (éléments h1) centrés sur la page,
 tous les titres de niveau 2 (éléments h2)de couleur bleue sur fond doré (identifiant de
couleur goldenrod),
 le texte des tous les paragraphes (éléments p) justifié (aligné) à gauche et à droite, avec un retrait
de 16 pixels au début de chaque paragraphe.

2. Modifiez vos styles de manière à obtenir l'affichage ci-dessus.

Exercice 2 : Travail à faire :

À partir de la page html suivante :

<h1>Web Mobile</h1>

<p>D'après wikipedia :Le Web Mobile ou Webmobile est une technique qui permet d'accéder à I
nternet depuis un téléphone mobile, on parle alors de l'Internet Mobile et des smartphones. Le web mobile s
 e matérialise notamment par l'utilisation de navigateur mobiles ou d'applications pour Smartphones mais au
ssi par des widgets, la consultation de mails de façon instantanée... C'est l'évolution des équipements, des u
sages et des forfaits de téléphone mobile qui ont permis le démarrage du web mobile.</p>

<blockquote>

<p>L'initiative du Web mobile est importante : l'information doit être traité de façon transparente sur n'i
mporte quel appareil</p>

<em>&mdash;Tim Berners-Lee</em>

</blockquote>

<a href="https://fr.wikipedia.org/wiki/Web_mobile">Plus de détails</a>

Étapes à suivre:

1. Le body doit être

o dans l'ordre de préférence de police helvetica, Arial, et sans-serif
o d'une hauteur de ligne de 1.5 sans unité
o d'une marge de 10px
o d'une taille police de 1em.
2. Le titre h1 avec :
o une police helvetica Arial serif
o une taille police de 1.5em
o une marge du bas à 1.5em
o la couleur "#454545"
o et un épaisseur de caractères gras.
3. Pour le paragraphe qui suit le titre :
o une couleur #7a7a7a.
o une marge gauche de 20 px.
o une marge du bas de 1.5em.
4. Le blockquote doit avoir :
o une police italic de taille 1.2em
o une marge droite de 80px du bas de 20px et de gauche de 60px
o un background #e7f2fa et une couleur #444
o une bordure gauche solide de 5px et de couleur #8870FF
o une marge interne de 15px
5. La balise em avec :
o un affichage en bloc
o un alignement à droite
6. le lien "plus de détails" :
o Une couleur #8870FF
o une marge gauche de 20px

Exercice 3 : On veut "styler" la page afin d'obtenir un contenu affiché dans la page ci-dessous :

Exercice 4 :

Exercice 5 :

1. Créer une page html et une page css permettant avoir le résultat suivant :
2. Utiliser le flottement pour avoir le résultat suivant :

3. Annuler le flottement pour la div 3 : utiliser ma propriete clear (avec la valeur both)

4. Supprimer la propriété float pour toutes les div. Retrouver le même résultat avec la propriété
display
5. Utiliser la propriété position pour avoir le résultat affiché ci-dessous
Exercce 6 :
Utiliser les pseudos classe et les pseudos éléments pour avoir le rendu suivant :

NB : le lien à deux états : visité et survolé

Exercice 7 :
Utiliser les transitions pour créer un menu déroulant :
Exercice 8: utilisation de la propriété Flex pour le résultat suivant :