Présentation de la séance 

L’objectif du TP est de réaliser la mise en forme d’un site en CSS:Il est constitué de 4 pages
mises en forme sur une seule feuille de style contenue dans le dossier CSS/.
L’arborescence du site est la suivante:

A la fin du TP votre site doit ressembler à la capture d’écran suivante :

Etape 1:

A l’aide de la balise <link> intégrez la feuille de style «style.css» dans toutes

les pages html du site.

Etape 2:

Compléter le fichier style.css (attention la structure du fichier ne doit pas être

modifiée. Vous devez seulement compléter les sections du fichier sans rien
supprimer). N’hésitez pas à vous référer aux captures d’écranen annexe.

Body{

✓ La couleur de fond du body sera #C5C5C5.

✓ Il aura une largeur de 900px et il sera centré sur la page.
✓ A l’aide de la fonction «padding» mettez un écartement supérieur de 20px.

header{

✓ Sa position sera relative.

✓ Elle aura une hauteur de 200 px
✓ L’image de fond sera «bg_header.jpg»

header h1{

✓ Sa position sera absolue.

✓ La largeur est de 300 px et la hauteur de 50px.
✓ Le texte sera centré horizontalement.
✓ La couleur de la police est rouge sur fond blanc.
✓ Le texte sera en majuscule (Uppercase).

headerimg {

✓ Sa position est absolue.

✓ Il est positionné à 20px du bord gauche et 20px du bord haut.

}
section{

✓ La couleur de fond est blanche.

✓ Elle aura un écartement (fonction «padding») de 20px.
✓ La police sera de type «'Inconsolata', monospace» importée depuis google
font, avec une taille de 18px.

sectionh1 {

✓ La couleur du texte est rouge et majuscule.

.image{

✓ Elle est centrée horizontalement.

.telechargement{

✓ La largeur est de 40px et la hauteur de 40px.

✓ L’image est alignée verticalement sur le milieu du texte (vertical-align).

footer{

✓ Il a une hauteur de 80px.

✓ La couleur de fond est blanche.
✓ Il y a une bordure seulement en haut de couleur #AAA de type «solid» et
de 2px d’épaisseur.

Vous déposerez votre travail dans un fichier zippé à votre nom dans
l’ENT en respectant l’architecture initiale.
BONUS :

centrez verticalement le texte du header h1.

Centrez horizontalement et verticalement le texte du footer.