Web Statique

TP2 : CSS3

Préambule

Documentations
Pour vous aider, vous avez vos cours et la documentation w3school sur le CSS.

Validation du code CSS

Comme pour l’HTML5, il est possible de vérifier la validité et la conformité des feuilles de style CSS en
sur le site [Link] Le validateur signale les erreurs permettant d’apporter
les corrections nécessaires. Validez votre code CSS au fur et à mesure.

Commentaires
Vous pouvez ajouter les commentaires en CSS comme suivant :

/* Ceci est un commentaire */

Inspecteur du code
L’inspecteur de code est un outil intégré dans les navigateurs qui permet d’examiner le code html et
CSS d’une page, et qui permet de voir en live les modifications effectuées (sans enregistrer dans votre
feuille de style)

Pour l’activer, il suffit d’ouvrir votre page html avec votre navigateur ➔ clic-droit ➔ inspecter
l’élément ou inspecter

MERYEM BENYOUSSEF 1/11

 Web Statique

Partie I : Exercices
Objectif :
Ajouter du style CSS au texte, arrière-plan, bordure, lien hypertexte et tableau.

Travail demandé :
Pour cette première partie du TP2, vous allez ajouter un style à la page [Link]

1. Inclure une feuille de style CSS externe

• Téléchargez et décompressez le dossier TP2. Le contenu du fichier [Link] est inspiré
d’ici.
• Créez une feuille de style [Link], et associez-la à la page [Link], en utilisant la balise
<link>.

2. Mise en forme du texte, arrière-plan et bordure

2.1. Sélecteurs de balises

Ajoutez les styles suivants :
a) Les titres de niveau 1 <h1> :
• Texte en gras, centré sur fond jaune,

• On souhaite ajouter deux images au fond de la balise <h1>. Ajouter au sélecteur de

la balise h1 les propriétés ci-dessous. Visualisez le résultat au fur et à mesure.
Documentation sur la propriété background en général et background avec multiples
images
• Ajouter les images au fond

• Contrôler la taille de ces images :

• Contrôler la répétition :

• Contrôler la position :

MERYEM BENYOUSSEF 2/11

 Web Statique

b) Les titres de niveau 2 <h2>:

• Une police Trebuchet MS et un texte de style italique.
• Une bordure en pointillé rouge avec une épaisseur de 3 pixels.
• Une marge interne de 10px, et une marge externe de 20px.

c) Les titres de niveau 3 <h3>:

• Une couleur bleue

2.2. Sélecteurs de classes et pseudo-éléments

• Ajoutez l’attribut classe aux trois premiers paragraphes tel que :
- Premier paragraphe de classe « para1 »: police serif, taille de texte 18pt, interligne
(distance entre deux lignes) 30pt. ➔ Utilisez les sélecteurs de classe (.para1)
- Deuxième paragraphe de classe « para2 »: première lettre en gras bleu et de taille
15pt, première ligne en italique ➔ Utilisez les pseudo-éléments (first-letter et
first-line)
Documentation sur les pseudo-éléments
- Troisième paragraphe de classe « para3 » : Utilisez le pseudo-élément (after) afin
d’ajouter quelque chose après un élément.
Par exemple l’ajout d’un contenu après un paragraphe de la classe « p3 »

• Ajoutez une propriété pour que ce texte ajouté soit de couleur rouge
2.3. Sélecteurs d’attributs
Vous allez être amenés à utiliser plusieurs classes dans votre code. Il peut
être intéressant d’appliquer des règles communes à plusieurs d’entre elles. Pour ce faire vous
allez pouvoir utiliser le sélecteur d’attribut [class*="texteCommunAuClasse"].
Par exemple, le code suivant met la couleur du fond en argent pour tous les div dont la classe
contient la chaîne "test" :

• Ajoutez la règle précédente à votre fichier [Link], et visualisez le résultat.

MERYEM BENYOUSSEF 3/11

 Web Statique

• Autres propriétés intéressantes sur les sélecteurs d’attributs à étudier.

2.4. Sélecteurs de descendants et d’adjacents
Considérez le code HTML dans la balise <article>.

Appliquez les styles ci-dessous, sans rajouter autres id ou classes au code HTML, n’utilisez
qu’un seul sélecteur pour chaque question. (Retourner vers votre cours)

• Mettez le fond des lignes 6, 12 et 19 en couleur jaune (yellow)

• Mettez la ligne 16 en couleur verte (green)
• Mettez les lignes 6, 12 en couleur rouge (red).
• Mettez les lignes 13, 14, 20 et 22 en couleur orange (orange).
• Mettez la ligne 11 en couleur bleue, utilisez la pseudo-classe : first-child

3. Mise en forme des liens hypertextes et les pseudo-classes

Appliquez aux deux liens dans les deux premiers paragraphes le style ci-dessous en ajoutant
des attributs « class » aux balises <a> et à l’aide des pseudo-classes :
Attention à l’ordre des sélecteurs ( Documentation W3Schools )
✓ hover DOIT venir après link et visited
✓ active DOIT venir après hover
• Le premier lien, lorsque :
- Non visité (link): non souligné et bleu.
Remarquez que le lien change de couleur une fois visité même si on n’a pas défini
un style pour ce cas, car le css prédéfinit du navigateur a été utilisé.
- Visité (visited) : orange
- Au survol de la souris (hover): ce lien doit grossir (taille de texte), devenir vert, et
toutes les lettres doivent être en majuscule
• Le deuxième lien, lorsque :
- Non visité (link): il ne se distingue pas du texte (aucune décoration et même
couleur par rapport de l’élément parent); ( Pensez inherit Documentation
w3chools)
- Au survol (hover): en gras, bleu, souligné, sur fond jaune;

MERYEM BENYOUSSEF 4/11

 Web Statique

- Au clic (active): en gras, rouge, non souligné, sur fond argenté.

4. Mise en forme des tableaux
• Habillez le tableau de façon qu’il s’affiche comme illustré ci-dessous.
• Aides :
- Légende : police Broadway , gras, avec une marge externe de 10px
- Texte du tableau : Police sans-serif
- Couleurs : bleu en fond (#EFF6FF) pour les en-têtes, bleu des bordures (#6495ed);
- Bordure externe du tableau = 3 pixels ;
- Bordure interne = 1 pixel;
- Les cases du tableau se touchent (border-collapse : collapse;)
- Tableau centré : (margin :auto ;)
- Tableau occupe la moitié de la largeur de la page, et les cases occupent ¼ de la
largeur du tableau (pensez width et pourcentage)

5. Exercice optionnel
• Considérez le texte dans la balise div.

• Reproduisez le style comme sur l’image ci-dessous, en utilisant seulement l’identifiant

(#fable), n’ajoutez aucun autre id ou class.
- Ajoutez un effet affichant chaque vers en vert lorsque la souris le survole.
- Aides :
❖ Le paragraphe « FIN » ne doit pas être concerné par l’effet vert au survol.
❖ Comme chaque ligne de la fable a un effet différent des autres à un moment
(seule la ligne survolée devient verte, les autres restent bleues), il ne faut pas
utiliser de balise <br> mais bien mettre chaque ligne dans une balise <p>, toutes
les lignes étant incluses dans une balise <div>.
❖ Bien sûr, on n’encastre pas de balises <p> les unes dans les autres

MERYEM BENYOUSSEF 5/11

 Web Statique

❖ La balise de type bloc générique est <div> qui elles peuvent s’encastrer les unes
dans les autres.
❖ Afin de centrer horizontalement un élément de type bloc : il faut mettre la
marge externe (margin) en auto, et définir la valeur de la largeur (width).
Attention à ne pas confondre avec le centrage horizontal d’un texte dans un
bloc qui se fait avec text-align : center;

MERYEM BENYOUSSEF 6/11

 Web Statique

Partie II : Site BiblioJunia

Travail demandé :
Dans la deuxième partie du TP2, vous allez ajouter un style au site « biblioJunia ». Validez votre code
CSS au fur et à mesure.

1. Inclure une feuille de style CSS

• Ouvrez votre dossier « BiblioJunia » avec VSCode
• Créez un dossier « css » dans le dossier « biblioJunia ».
• Dans le dossier « css », créez un fichier [Link]
• Associez à la page [Link] la feuille de style [Link], même chose pour les autres pages
du site web.

2. Mise en forme générale

• Donnez à l’ensemble du texte de la page une police : Helvetia, Arial, sans serif et une taille
de texte de 14 px
➔ Utilisez le sélecteur universel (*) , qui cible toutes les balises de la page

• Afin d’éviter des problèmes de débordement, appliquez la propriété box-sizing: border-

box; à l’ensemble des balises de la page.
• Enlever la décoration de tout le texte de la page (comme le soulignement des liens
hypertextes) text-decoration: none;
• Enlever les puces des listes non ordonnées list-style-type: none;

• Donnez au body, une marge externe de 0px ;

3. Mise en forme du <header> … </header>

• Donnez aux images qui sont dans le header une largeur de 10%.
• Donnez aux liens hypertextes du header une marge interne de 10px (en haut et bas) et de
20px (à droite et à gauche) padding: 10px 20px; Mettez le texte en couleur rgb(61,42,87)
et centrez-le.
• Donnez aux liens une bordure blanche de 2px d’épaisseur, avec un des coins arrondis de 20px
border-radius: 20px; Documentation sur les coins arrondis
• La bordure des liens devient en couleur rgb(61,42,87) lors du survol du curseur.

MERYEM BENYOUSSEF 7/11

 Web Statique

4. Les variables en CSS

Afin d’optimiser le code css, et au lieu de mettre les valeurs des couleurs, on peut créer des variables
css.

• Créez les 4 variables suivantes (au début de la feuille css). Remarquez que les variables en CSS
commencent par -- :

• Remplacez les valeurs des couleurs sur votre feuille de CSS avec les variables crées.
Exemple :

➔ Documentation sur les variables en CSS

5. Mise en forme du <nav> … </nav>

• Donnez au menu de navigation une couleur de fond en violet-JUNIA et une marge interne de
10px.
• Donnez aux éléments de la lise du menu de navigation une marge externe à gauche de 30px,
et changer le mode d’affichage en « inline » (propriété display)
• Donnez aux lien hypertexte du menu de navigation une couleur blanche. Mettez-les en gras
et en majuscule (text-transform).
• Lors du survol sur ces liens, changer la couleur en orange-JUNIA et ajoutez un trait sur le texte
(text-decoratio)
• Afin de marquer la page courante (active), ajouter un identifiant « active » au lien hypertexte
vers l’accueil, et donnez à ce lien le même style que le style précédent (lors du survol).

6. Mise en forme du <main> … </main>

• Donnez au « main » une couleur de fond en violet-clair et une marge interne de 5px.
• Donnez aux articles une largeur de 30% et hauteur de 300px, une marge interne en haut de
5px, une bordure en violet-JUNIA d’épaisseur 1px avec des coins arrondis de 5px. Mettez le
texte en violet-JUNIA
• Donnez aux images des articles une largeur de 150px et hauteur de 200px
• Attribuez à la balise div une class « resume ». Donnez aux résumés une largeur et hauteur de
100%, une couleur de fond en violet-JUNIA-Transparent, une marge interne de 20px, des
coins arrondis de 5px et une couleur de texte en blanc.
• Cachez les résumés (display: none;). Affichez-les lors du survol sur les articles

MERYEM BENYOUSSEF 8/11

 Web Statique

7. Mise en forme du <footer> … </footer>

• Donnez au footer une couleur de fond en violet-JUNIA , une marge interne de 2% et une
couleur de texte blanche.
• Donnez au iframe une largeur de 20%. (Attention, supprimez d’abord du code html de l’frame
les attributs height, width et style)
• Donnez aux deux premiers liens hypertextes du footer la classe « formLink ». Donnez à ces
liens une couleur blanche et ajouter un soulignement lors du survol du curseur.
• Donnez à la deuxième « ul » l’identifiant « social ». À l’aide de cet id, donnez aux éléments
un affichage en ligne (display). Donnez aux images une largeur de 20px.

8. Mise en forme du formulaire de contact (page [Link])

• Ajoutez une classe « formLetter » au formulaire.
• Utilisez obligatoirement cette classe pour appliquer tous les styles suivants.

a) Mise en forme des « fieldset »

• Mettez la bordure en violet de JUNIA
• Fixez la largeur sur 60% : propriété width
• Centrez le bloc, en donnant à la propriété « margin » la valeur « auto »
Remarque : Attention à ne pas confondre avec le centrage horizontal d’un texte dans un bloc
qui se fait avec text-align : center;
• Ajoutez une marge interne de 25 px.
• Quand le curseur survole le bloc « fieldset », ajoutez un ombre à ce bloc en violet de Junia,
de 2 px de décalage et un effet flou de 5px
 Documentation sur l'ombre du bloc

b) Mise en forme des « legend »

• Mettez le texte en gras
• Ajoutez un ombre au texte en violet de Junia, de 1 px de décalage
 Documentation sur l'ombre du texte

c) Mise en forme des « label » :

• Mettez le texte en gras
• Donnez aux « labels » une largeur de 25%. Remarquez qu’on ne peut pas changer la largeur
des « label » car ils sont de type inline. Ajoutez alors la propriété ci-dessous permettant de
changer le type de cette balise.

d) Mise en forme des « input » de type texte et email :

• Utilisez les sélecteurs d’attributs et regroupez les sélecteurs pour éviter la répétition
• Supprimez la bordure : « border : none ; »
• Ajouter une bordure inférieure d’épaisseur 1px, de type « solid » et de couleur violette de
Junia.
• Mettez le fond en violet clair et le texte en violet de Junia

MERYEM BENYOUSSEF 9/11

 Web Statique

• Donnez une largeur de 25%

• Quand ces champs sont en mode « focus », appliquez le style suivant :
o Supprimez le style du contour : « outline-style : none ; »
➔ Documentation : Outline
o Ajoutez une bordure inférieure d’épaisseur 1px, de type « solide » et de couleur rouge
o Mettez le fond en blanc

e) Mise en forme de la liste déroulante « select »

• Appliquez à la liste déroulante le même style appliqué aux « input » de type texte et email
(sauf celui du mode focus). Regroupez les sélecteurs.

f) Mise en forme du champ de texte « textarea »

• Donnez à ce champ une largeur de 25%, une hauteur de 50px.
• Centrez le bloc. Remarquez que même lorsqu’on ajoute « maring :auto ; » le bloc n’est pas
centré car son display est inline-block (vérifiez cela avec l’outil « inspecter »), changer alors
le display en block : « display :block ; »
• Mettez le fond en violet clair
• Quand ce champ est en mode « focus », appliquez le style suivant :
o Supprimez le style du contour : « outline-style : none ; »
o Ajoutez une bordure de 1px d’épaisseur, de type solide et de couleur rouge.
o Mettez le fond en blanc
o Donnez une largeur de 50% et une hauteur de 100px

g) Mise en forme des « input » de type « submit » et « reset »

• Mettez le texte en gras, en blanc sur un fond violet de Junia
• Ajoutez une bordure de 2px d’épaisseur, de type solide et de couleur violette de Junia
• Ajoutez une marge externe de 10px et une marge interne de 10 px verticale et 20 px
horizontale
• Fixer la largeur à 120px
• Ajoutez des coins arrondis de 10 px : « border-radius »
• Ajoutez un ombre à ces boutons en violet de Junia, de 2 px de décalage et un effet flou de
5px : « box-shadow »
• Quand le curseur survole ces boutons, appliquez le style suivant :
o Mettez le texte en rouge, sur un fond blanc
o Ajoutez une bordure de 2px d’épaisseur de type solide et de couleur rouge
o Ajoutez un ombre à ces boutons en rouge, de 2 px de décalage et un effet flou de 5px
o Changez le style de curseur en pointeur, comme ci-dessous :
o Documentation sur les curseurs

9. Mise en forme du formulaire d’inscription (page [Link])

Habillez le formulaire d’inscription à la newsletter ([Link]) selon vos préférences, n’hésitez pas à
explorer des propriétés non encore utilisées.

MERYEM BENYOUSSEF 10/11

 Web Statique

[Link] de connaissances
Pour finaliser ce TP, faîtes le test de connaissance CSS du w3schools :

[Link]

[Link] rendu
Le compte rendu doit être sous forme d’un dossier compressé contenant les deux dossiers : « TP2 » et
« BiblioJunia »

[Link]é ?
Si vous avez tout fini et il vous reste du temps libre :

• Vous pouvez explorer ces notions avancées du CSS : Les gradients , Le styling des images , le
masquage Vous pouvez, si vous le souhaitez, mettre vos créations en bas de la page
[Link].
• Ou encore, amusez-vous avec ce jeu pour maitriser l’utilisation des sélecteurs :
[Link]

FIN TP2

MERYEM BENYOUSSEF 11/11