TP n° 3 : Mise en forme avec CSS
Exercice 1 :
1. Créez un document html nommé [Link] qui se présente comme suit :
2. Quel est l’intérêt de la balise <style> ? Que fait chaque propriété ?
3. Expliquer la différence les 2 définitions du style.
Exercice 2 :
1. Créer une page HTML nommée [Link] comme suit (sans utiliser de style):
2. Ajouter dans l’entête de cette page les styles suivants :
Un style sur la balise <P> pour que le texte soit en bleu, avec la police Times New Roman.
Un style sur les titres niveau 1 <H1> pour qu’ils soient en rouge, en italique et avec la police
Arial.
Un style sur les titres niveau 2 <H2> pour qu’ils soient en vert et qu’ils utilisent la police
Arial.
1
Un style pour les balises <strong> pour qu’ils soient en vert, qu’ils ne soient pas en gras et
qu’ils utilisent la police Arial.
Un style pour les balises <em> pour qu’ils soient en rose, gras et ne soient pas italique,
3. Modifier le fichier [Link] pour aligner le texte du dernier paragraphe à droite.
4. Reprendre le même exercice en définissant cette fois-ci le style dans une feuille de style
nommée [Link]
Exercice 3 :
1. Créer une page HTML nommée [Link] telle que décrite dans la page suivante (avant
d’appliquer un style):
2. Créer une feuille de style [Link] et ajouter les styles nécessaires pour répondre au
fonctionnement suivant :
- Le titre de la page doit être rouge, centré, de taille 32px et de style Verdana.
- Les sous-titres soulignés, de couleur bleue, écrits en majuscules (toutes les lettres) et
de taille 24.
- Tous les termes « Syntaxe » doivent être en mauve, soulignés, gras et pas italique
- Les termes soulignés doivent avoir un fond jaune, de style Arial et non souligné
- L’expression décrivant la syntaxe doit être en rouge avec fond jaune de police
verdana, centré et gras
3. Utiliser les styles du fichier [Link] dans la page [Link]
2
Exercice 4 :
Il s’agit d’écrire les fichiers [Link] et [Link] pour obtenir l’aperçu suivant :
Les styles à adopter sont fournis dans le tableau ci-dessous. Pour ce faire, utiliser uniquement les
sélecteurs de classe dans la feuille de style externe [Link].
Texte Caractéristiques de style
Titre Le texte apparaît en majuscule (même si il est écrit en minuscule dans le
fichier html), surligné et la couleur d’arrière plan est cyan.
Sous Titre Espacement entre les lettres est 5px, la première lettre du sous titre est en
majuscule, la couleur de l’arrière-plan est jaune.
Texte Paragraphe 1 La hauteur de la ligne est de 1em, la couleur d’arrière plan est jaune.
Mot important La hauteur de la ligne est de 2em, la couleur d’arrière plan est blan et le
texte est en gras.
Texte Paragraphe 2 La hauteur de la ligne est de 0.7em.
Mot barré La hauteur de la ligne est de 0.7em, le texte est barré et la couleur de
l’arrière plan est rouge.
Exercice 5 :
1. Créer une page HTML nommée [Link] comme suit (avant d’appliquer un style):
3
2. Créer une feuille de style [Link] et ajouter les styles nécessaires pour que la page
s’affiche comme suit :
Il est à noter qu’en plus de la mise en forme identifiable dans la figure précédente :
- Le titre de la page a un fond de couleur cyan
4
- Les sous-titres ainsi que les termes en gras sont colorés en rouge
- Les deux premiers paragraphes sont en vert et de police « Arial »
- Les mots en italique des deux premiers paragraphes sont en gras, colorés en rouge, ont un
fond jaune et ont pour police « Monotype Corsiva »
- Les 4 dernières lignes du document sont en bleu et de police « Verdana »
3. Utiliser les styles du fichier [Link] dans la page [Link]