Cet exercice pas à pas vous guide pour la mise en forme en CSS d’une page HTML.
La correction est disponible pour la majorité des questions de cet exercice. Tâchez cependant d’essayer de traiter chaque question avant de consulter sa correction.
Cet exercice est destiné à vous apprendre à coder en HTML/CSS. Il ne s’agit pas de vous entrainer à faire des copier/coller.
Mise en place de l’exercice
Créez un dossier de travail à l’emplacement de votre choix sur votre ordinateur.
Téléchargez les fichiers de l’exercice en cliquant sur le bouton ci-dessous :
Source de l’image utilisée pour l’exercice :
Photo par Michael Dam sur Unsplash.
Placez les deux fichiers dans votre dossier de travail et ouvrez le fichier html avec un logiciel d’édition.
Créez un nouveau fichier css et enregistrez-le dans votre dossier de travail.
Pour la suite de l’exercice, les questions commenceront par HTML ou par CSS pour vous signaler lequel des deux fichiers doit être modifié.
HTML : Intégrez la feuille de style que vous venez de créer dans votre page html.
Afficher la solutionParamétrage par défaut de la page
HTML ou CSS : Utilisez le site Google Font afin d’intégrer la police de caractère Raleway avec les version regular et gras dans votre page.
Afficher la solutionCSS : Utilisez le sélecteur adapté afin de définir la police Raleway par défaut pour la page.

Mise en forme de l’en-tête de la page
CSS : Modifiez l’en-tête de la page HTML afin d’obtenir le résultat illustré par la capture ci-dessous. Vous devez pour cela manipuler trois paramètres :
- La couleur d’arrière-plan ;
- Les marges internes ;
- La taille des caractères.

CSS : Supprimez les marges externes du corps de la page HTML afin de coller votre en-tête aux bords de la fenêtre comme dans la capture ci-dessous.

Mise en forme du menu
CSS : Supprimez les marges externes ET les marges internes de la liste utilisée pour structurer le menu afin d’obtenir le résultat illustré par la capture ci-dessous.

CSS : En utilisant la propriété CSS display
, modifiez le comportement des lignes de la liste utilisée pour le menu afin qu’elles se positionnent côte à côte et que l’on puisse les dimensionner par la suite. Les lignes doivent donc se comporter comme des éléments inline-block
.

CSS : Ajoutez des marges internes aux lignes de la liste du menu pour obtenir un résultat correspondant à la capture ci-dessous.

CSS : Modifiez les liens hypertextes présents dans le menu afin d’obtenir le résultat correspondant à la capture ci-dessous. Vous devez pour cela effectuer les réglages suivants :
- Ajoutez des marges internes ;
- Modifiez la couleur du texte ;
- Supprimez les soulignements.

CSS : Utilisez la pseudo-classe :hover
afin de modifier les liens lors du survol de la souris et obtenir le résultat illustré par l’animation ci-dessous.
HTML : Ajoutez une classe au lien Mon CV qui correspond à la page que vous êtes en train de mettre en forme.
Afficher la solution HTMLCSS : En utilisant la classe ajoutée à la question précédente, mettez en valeur le lien correspondant à la page courante.

Mise en forme générale du contenu de la page
CSS : Réglez le contenu de la page pour obtenir le résultat illustré par la capture d’écran ci-dessous. Pour cela, vous devrez effectuer les opérations suivantes :
- Dimensionnez le contenu de la page pour qu’il fasse 1000 pixels de large au maximum ;
- Ajoutez des marges externes automatiques à gauche et à droite (pour centrer le contenu dans la page) ;
- Ajoutez des marges externes de 20 pixels en dessus et en dessous ;
- Ajoutez des marges internes de 10px à droite et à gauche (pour que le contenu ne soit pas collé aux bords de la page sur les écrans étroits).

CSS : Modifiez le titre de la page afin qu’il corresponde à la capture ci-dessous. Vous devez pour cela effectuer les réglages suivants :
- Supprimez le gras ;
- Ajoutez des petites majuscules.

HTML : Ajoutez un élément <span></span>
vide à l’intérieur du titre <h1></h1>
en prenant soin de l’insérer avant le texte.
CSS : Transformez l’élément <span></span>
inséré à la question précédente pour obtenir le résultat illustrée par la capture d’écran ci-dessous. Vous devez pour cela effectuer les réglages suivants :
- Transformez l’élément inline
<span>
en élément de type inline-block pour pouvoir le dimensionner ; - Définissez la largeur et la hauteur (même valeur) de l’élément en pixels ;
- Ajoutez une bordure ;
- Arrondissez la bordure à 50% ;
- Insérez une marge externe à droite.
Mise en forme générale des sections du CV
HTML : Observez bien le code HTML et identifiez la classe qui est appliquée aux différentes sections du CV (Mon état civil, Mon expérience professionnelle, etc.). Remarquez-vous quelque chose de particulier ?
Afficher la solutionCSS : Effectuez la mise en forme des différentes sections du CV pour obtenir le résultat illustré par la capture d’écran ci-dessous. Cette question consiste principalement à distinguer les bordures des différentes parties avec des variations d’épaisseur, de style et de couleur.

CSS : Personnalisez les titres des différentes sections pour correspondre à la capture d’écran ci-dessous. Prenez garde à préciser dans votre sélecteur qu’il s’agit spécifiquement des titres du CV. En effet, le site web risque d’utiliser des éléments <h2>
dans les autres pages qui auront peut être une mise en forme différente.

Mise en forme de la section Mon état civil
CSS : Ciblez la photo en précisant, via le sélecteur, qu’il s’agit spécifiquement de la photo de la section Mon état civil. Puis personnalisez l’image comme dans la capture ci-dessous. Pour cela, vous devrez effectuer les opérations suivantes :
- Ajoutez une bordure ;
- Ajoutez des marges internes ;
- Arrondissez les bords de l’image en utilisant quatre valeurs différentes.
Pour les bords arrondis, vous pouvez vous aider d’un générateur de bordure comme celui que vous trouverez à la fin de l’article https://juliencrego.com/cours/les-bords-arrondis-en-css-avec-border-radius/#generateur-darrondis-10.

CSS : Utilisez la propriété CSS float: right;
pour positionner l’image. Ce type de positionnement flottant permet de placer l’image à droite de la page. Le texte qui se trouve en dessous va se placer à côté de l’image.

CSS : Modifiez les lignes de la liste présente dans la section Mon état civil pour correspondre à la capture d’écran ci-dessous. Pour obtenir le même résultat :
- Modifiez le type de la liste ;
- Ajoutez des marges internes.

CSS : Terminez la mise en forme de la section en vous reportant à la capture d’écran ci-dessous. Le sélecteur utilisé doit bien préciser que vous ciblez les éléments <span>
qui se trouve dans une liste de la section Mon état civil.

Mise en forme de la section Mes compétences numériques
CSS : Transformez les éléments utilisant la classe competence-niveau
en éléments inline-block afin de pouvoir les dimensionner et les présenter comme dans la capture ci-dessous. Voici donc la liste des opérations à effectuer :
- Transformez les éléments en inline-block ;
- Dimensionnez les éléments avec une largeur et une hauteur ;
- Ajoutez une bordure.

CSS : Les éléments modifiés à la question précédente contiennent chacun un élément <div>. Utilisez les pour créer des barres de niveau pour chacune des compétences comme illustré dans la capture ci-dessous. Pour chaque compétence spécifique texte
, web
et pao
vous devez ainsi suivre les étapes suivantes :
- Ajoutez une couleur d’arrière-plan ;
- Définissez la hauteur pour que l’élément occupe tout le conteneur ;
- Définissez une largeur en pourcentage pour représenter le niveau de compétence.

CSS : Cette question est facultative. Vous avez du constater que pour régler les trois niveaux de compétence, vous avez varié les largeurs mais pas les hauteurs ou les couleurs d’arrière-plan. Essayez de rationaliser votre code en regroupant les deux paramètres communs sous un sélecteur commun aux trois compétences.
Afficher la solution CSSCSS : Terminez la mise en forme de la section Mes compétences numériques en vous basant sur la capture d’écran ci-dessous. Pour obtenir ce résultat vous devez appliquer les opérations suivantes sur les libellés des compétences :
- Transformez les éléments en inline-block ;
- Définissez une largeur pour les éléments ;
- Alignez le texte à droite.

Mise en forme des deux dernières sections
CSS : En vous basant sur les manipulations effectuées jusqu’à maintenant, reproduisez la mise en forme pour les deux sections Mon expérience professionnelle et Mes formations en vous basant sur la capture ci-dessous. Si vous connaissez, vous pouvez utiliser un positionnement flexible avec flexbox.

CSS : Complétez la mise en forme pour les deux sections Mon expérience professionnelle et Mes formations en vous basant sur la capture ci-dessous.

HTML et/ou CSS : Supprimez la bordure pour les derniers éléments des deux sections Mon expérience professionnelle et Mes formations.

Sauf mention contraire*, l'article Mise en forme en CSS : Pas à pas 03 [CSS43] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.