Conception HTML et CSS

TP2: Créer des feuilles de style CSS

Exercice 1:
On va travailler sur le document : [Link] du dossier de ressources « css ».
1. Créez un fichier [Link] et définissez une nouvelle couleur de fond (par exemple la
couleur #C8C8C8)
2. À l'aide d'une seule définition, spécifiez une couleur bleue pour les éléments h1 et h2
3. Mettez les titres h2 au centre de la page
4. Justifiez le texte des paragraphes et mettre sa taille à 20 px
5. Mettez le texte italique des paragraphes en gras souligné
6. Créez une classe nommée « special » qui met le texte en rouge, et appliquez-la au dernier
paragraphe
Exercice 2 :
On va travailler sur le document : [Link] du dossier de ressources « css ». A l’aide d’une feuille
de style CSS, modifiez l’apparence de votre fichier html afin d’obtenir le résultat ci-dessous en
suivant les consignes suivantes :
1. Mettre la taille du texte de votre page à 16px
2. Mettre en bloc le titre et les deux premiers paragraphes (div), afin de leur associer une
largeur de 80%, une hauteur de 500 px et une couleur de fond grise (#EEE)
3. Mettre les paragraphes de votre page sur un fond rose (pink) avec une largeur de 70% et
une hauteur de 200 px
4. La couleur du titre doit être de couleur blanche sur un fond bleu (rgb(90,50,220)), avec une
largeur de 80% et une hauteur de 50 px

Page 1 sur 6
 Conception HTML et CSS

5. Pour éviter les problèmes de débordement (dus au dimensionnement), utilisez la valeur auto
à la propriété height : chaque paragraphe occupera alors la place qui lui est nécessaire pour
afficher son contenu.
Voir le rendu de de votre page web : le problème est réglé
S’il semble nécessaire au programmeur de définir impérativement une hauteur à chaque élément,
il est possible de conserver cette présentation en appliquant la propriété overflow pour gérer les
éventuels débordements des contenus :
 visible : le contenu débordant est affiché
 hidden : le contenu débordant est caché et donc illisible
 scroll : des barres de défilement horizontale et verticale apparaissent sur les côtés droit et
bas de la boîte de l’élément, ce qui permet d’accéder au contenu débordant. Cette valeur a
l’inconvénient de laisser apparaître ces barres même si le contenu ne déborde pas
 auto : le navigateur fait apparaître les barres de défilement en cas de débordement
uniquement
6. Rétablissez les hauteurs à leurs valeurs initiales, et associez aux paragraphes la propriété
qui permet d’afficher les barres de défilement en cas de débordement (comme le montre
l’image ci-dessous)

Page 2 sur 6
 Conception HTML et CSS

Les débordements sont alors gérés, mais quand le texte ne déborde pas, ou plus exactement, est
minime par rapport à la dimension qui lui est attribuée, l’espace inoccupé n’est pas supprimé ou
caché.
Pour pouvoir intervenir sur les hauteurs des éléments sans pour autant les fixer de manière absolue,
nous pouvons définir une hauteur minimale (min-height) et une hauteur maximale (max-height)
pour tous les éléments, à l’exception des éléments en ligne et des éléments de tableau.
De même, une largeur minimale et une largeur maximale peuvent être indiquées pour les mêmes
éléments à l’aide des propriétés min-width et max-width.
7. Éliminez les valeurs fixes des hauteurs.
8. Attribuez au bloc (div) une hauteur maximale de 800px
9. Attribuez aux paragraphes une hauteur minimale de 80px et une hauteur maximale de
250px. Vous devez vous retrouver avec l’apparence ci-dessous.

Page 3 sur 6
 Conception HTML et CSS

Exercice 3 :
Nous allons prendre quelques citations latines traduites en français (css/[Link])
1. Mettez-les sous forme de listes de définition (dt pour les citations et dd pour les traductions)
2. Faites en sorte (avec une feuille de style séparée) que :
a. Le passage de la souris sur les citations met leur texte en couleur mauve (#F0F)
b. Le passage de la souris sur les traductions met leur texte en couleur jaune(#FF0)
c. La sélection des citations se fasse sur un fond jaune (#FF0) (dt::selection)
d. La sélection des traductions se fasse sur un fond mauve (#F0F).
Exercice 4 :
L’objectif de cet exercice est de modifier l’apparence d’un tableau à l’aide des feuilles de style.
Voici d’abord quelques propriétés CSS associées aux tableaux:

Nous allons appliquer le style à la page « css/[Link] »

Page 4 sur 6
 Conception HTML et CSS

2. La largeur du tableau doit être égale à 100% de la largeur de la page avec un fond rouge
pale (#FC9)
3. Mettez les bordures du tableau en relief, fusionnées, de 3px de largeur, avec une couleur
rouge
4. Mettez le titre du tableau en gras, avec une couleur bleue (#008), en bas du tableau aligné
à gauche
5. Attribuez à toutes les cellules des bordures noires de largeur de 1px
6. Mettez le texte des cellules en haut (vertical) centré
7. Le texte d’entête doit être écrit en blanc sur fond noir
8. Le texte des autres cellules doit être écrit sur fond vert pale (#CFC)

Exercice 5 :
Créez le fichier css qui permet de rendre la page « css/ex5/[Link] » sous la forme suivante :

Exercice 6 :
Pour gérer les marges en CSS, on utilise les propriétés margin et padding :

Page 5 sur 6
 Conception HTML et CSS

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on
veut qu'elles soient fixes ou proportionnelles.
On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom
(bas),-left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant celle du haut,
puis on tourne dans le sens des aiguilles d'une montre) : margin:2px 5px 2em 0;
Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à
gauche : padding:2px 5px;
Si on ne met qu’une seule valeur, elle s'appliquera aux quatre cotés.
Créez le fichier css qui permet d’aboutir au résultat suivant, en se basant sur le fichier
« css/ex6/[Link] » :

Page 6 sur 6