Atelier – Les feuilles de styles CSS
Exercice 1 : Les sélecteurs CSS
Soit l’extrait du code HTML suivant :
<ul>
<li>Langages de programmation
<ul>
<li>Java</li>
<li>C++</li>
<li>PHP></li>
</ul>
</li>
<li>Editeurs de texte
<ul>
<li>Sublime text</li>
<li>Atom</li>
<li>Notpad ++</li>
</ul>
</li>
</ul>
Écrire le code CSS qui permet de colorier la liste suivante (tester les différentes alternatives : en
utilisant les classes, les identifiants ou les balises).
Exercice 2 : Un CV en HTML + CSS
Pour cet exercice, nous vous invitons à revisiter le CV. Votre mission consiste à rédiger les
feuilles de style nécessaires en créant un nouveau fichier nommé 'monCV.css', ainsi qu'à
élaborer le code HTML correspondant pour obtenir l'apparence suivante. Veuillez également
inclure l'écriture du code HTML.
AtelierCSS Page1|4
Question 1 : Créer une feuille de style CSS vierge monCV.css.
Question 2 : Ajouter à Votre nom-CV.html un lien vers la feuille de style, en ajoutant dans l'en-tête
HTML (<head>) la balise : <link rel="stylesheet" type="text/css" href="monCV.css" />.
Question 3 : Obtenir le centrage du CV sur la page. Celui-ci est obtenu en ajoutant des propriétés au
sélecteur body : la largeur (width) sera de 70% (donc width: 70%;), et la marge gauche de 15% (margin-
left: 15%;), assurant de fait un centrage.
Question 4 : Centrer tout l'en-tête en ajoutant la propriété text-align: center; au sélecteur header.
Question 5 : Mettre le reste de l'en-tête en forme.
Les barres sont obtenues grâce aux propriétés border-top et border-bottom pour les sélecteurs
header, qui seront affectées à la valeur 10px solid suivie de la couleur adéquate (ici #688CD8). Il faut
tout mettre à la suite (10px solid #688CD8).
AtelierCSS Page2|4
Le fond de l'en-tête est obtenu avec une propriété background ayant pour valeur la couleur de fond
(ici #E8EFF7).
Aligner l'adresse à gauche en utilisant une propriété text-align: left ; il faudra rajouter un identifiant
dans le fichier HTML (par exemple id="adresse" au div encadrant l'adresse) puis utiliser #addesse dans
le CSS. Mettre une police à chasse fixe pour toute l'adresse (valeur font-family: monospace).
L'image est alignée à droite (float: right) ; le float signifie « flottant » et permet au texte de s'insérer
autour. La largeur (width) de l'image est 15%. Comme il n'y a qu'une seule image, on peut utiliser
header img (sans besoin d'utiliser d’identifiant ou de classe pour l'image).
Question 6 : Modifier la feuille de style pour afficher les barres de début et de fin de chaque partie du
CV (sélecteur article) à l'aide de border-top et border-bottom. Les bordures sont les mêmes que pour
l'en-tête général. Chaque article est séparé de ce qui précède par une marge de 30 points (donc
margin-top: 30pt;).
Question 7 : Mettre en forme le titre de chaque partie du CV (sélecteur article h1). La couleur du titre
est #385CA8, et le titre est en petites capitales. En outre, la couleur de fond se poursuit de 10 pixels
au-delà du titre (propriété padding).
Question 8 : Mettre en forme la partie « Formation ». Les années seront intégrées par exemple dans
des balises <span> avec une classe année :
<span class="annee">2018-2019</span>
L'alignement sera obtenu en utilisant une largeur de 100 pixels pour la classe année. Il conviendra d'y
ajouter une propriété display: block; et une propriété float: left;.
Exercice 3 : Mise en forme formulaire
Étant donné le formulaire suivant, veuillez écrire le code HTML et le code CSS qui définissent les styles
prédéfinis suivants (à enregistrer dans les fichiers respectifs index.html et styleForm.css), en
respectant les indications suivantes :
AtelierCSS Page3|4
- Formulaire
o Police : Verdana 11px
o Largeur : 500px
o Bordure : discontinue, épaisseur 1px et de couleur noire
- Champs de saisie et liste déroulante
Style par défaut Style en focus
Bordure : continue, 1px, verte Couleur de fond : aqua
Épaisseur de bordure : 3px
Couleur de bordure : bleu
- Les 2 boutons
o Bordure : continue, 1px, noire
o Couleur de fond : #FFFCCC
o Couleur de texte : noire
o Largeur/hauteur : 120/40px
o Les coins haut-gauche et bas-droit ont un arrondissement (border-radius) de
8px
- En cas de survol, les boutons subissent un effet ombré (box-shadow) de décalage 3px
vers la droite, 3px vers le bas, 2px de dégradé et de couleur gris.
Résultat attendu :
AtelierCSS Page4|4
