TP 2 : CSS 3
Objectif : c’est d’ajouter un style CSS à la page [Link]. Cette page contient un élément vide
<style> </style> qui représente un style interne. Toutes les propriétés CSS de ce TP doivent être ajoutées
à l’intérieur de cet élément.
Rappel : Voici un exemple de quelques propriétés CSS :
p{ div p { h1, h2 { h1 + p {
color : red ; color : blue ; color:green; color:red;
} } } }
La première propriété s’applique pour tous les paragraphes, la deuxième pour les paragraphes qui sont des
fils directs d’une division, la troisième pour les éléments H1 et H2. La dernière propriété est basé sur un
sélecteur contextuel (h1 + p) et s’applique pour les paragraphes qui sont précédées par un titre H1.
Partie I: « Le style du menu »
1. L’élément HEADER doit avoir une bordure solide, d’un arrondissement complet de 10px, et d’une
couleur égale à #B3E6FF.
2. L’image [Link] doit être ajoutée au fond du HEADER (propriété CSS background-
image), sans répétition, centrée au milieu.
3. La liste ul doit avoir un texte centré et sans aucune puce (propriété CSS list-style-type).
4. Ajoutez la propriété margin:10px; aux éléments li. Ceci permet d’ajouter une marge de 20px sur les
quatre côtés externes de chaque élément li comme suit :
20px
20px Élément li 20px
20px
D’autres variantes de cette propriété existent : margin-top, margin-bottom, margin-left, margin-right.
5. Chaque élément a se trouvant à l’intérieur d’un li doit avoir :
a) Un texte bleu, de 17px, non-souligné, et en petites majuscules.
b) Un mode d’affichage en block (ceci permet de spécifier la hauteur et la largeur des liens).
c) Une largeur de 180px, une hauteur de 22px, une couleur de fond égale à #B3E6FF, et un
arrondissement de bordure complet égal à 10px.
Partie II: « Le style du contenu »
1. L’élément body doit avoir un texte en bleu avec la police de caractères "ComicSans", cursive.
2. L’élément h2 doit avoir un texte centré (propriété CSS text-align), une couleur de texte égale à
#191970, et une couleur de texte égale à #191970. En plus, la propriété text-shadow:2px 2px red;
permet d’ajouter une ombre rouge décalée par 2 pixels sur les axes de X et Y.
3. L’élément div doit avoir : une bordure solide de couleur #B3E6FF, un arrondissement de bordure
complet égal à 10px, et une hauteur fixée à 500px. De plus, la propriété overflow-y:scroll; permet
d’activer le scrolling vertical lorsque le contenu du div dépasse 500px de hauteur.
4. Chaque élément fieldset doit avoir une bordure en pointillés, de couleur #B3E6FF et avec un
arrondissement égal à 10px sur les côtés supérieurs gauche et droit.
5. Chaque élément legend doit avoir un texte en gras, aligné au centre, de 16px, et en petites majuscules.
6. Le contenu de chaque table HTML doit occuper toute la largeur de la page.
7. Chaque élément td doit avoir une marge intérieure égale à 10px (propriété CSS padding qui joue le
rôle inverse de margin).
8. Les éléments select, et les éléments input de type radio, checkbox, date, file, reset, et submit doivent
avoir un curseur de type pointer.
9. Le bouton submit doit avoir: une largeur et une hauteur égale à 35px, un arrondissement de bordure
complet de 10px. La photo [Link] doit être affichée au fond du bouton avec une largeur et une
hauteur égales à 100% (propriétés CSS background-image et background-size).
10. Le bouton reset doit avoir les mêmes propriétés que submit à l’exception de l’image du fond qui doit
être [Link].
11. Les éléments footer et div doivent avoir margin-top de 10px.
Partie III: « Pseudo-classes CSS »
1. Chaque élément a se trouvant à l’intérieur d’un élément li doit avoir les propriétés suivantes lorsqu’il
est pointé par la souris (pseudo-classe :hover): une couleur de fond blanche, un texte en bleu, une
bordure solide de couleur #B3E6FF.
2. La valeur saisie sur chaque élément input doit être affichée en vert si elle est correcte par rapport à
son pattern (pseudo-classe :valide), ou en rouge si elle est incorrecte (pseudo-classe :invalide).
3. Quelques éléments input de type "text" sont suivis par un label contenant par défaut un message
d’erreur. On veut cacher ce message en cas de valeur correcte, et le faire apparaitre en cas de valeur
incorrecte. Ceci peut être réalisé avec des sélecteurs contextuels.
4. Une fois la souris pointe sur l’un des deux boutons, les propriétés suivantes doivent être appliquées :
une bordure en rouge, une transparence égale à 50% (propriété opacity:0.5), une rotation de 360°
(propriété transform:rotate(360deg)). La transformation doit être effectuée en 1 seconde (propriété
transition:transform 1s).