Mise en forme en CSS : Pas à pas 02 CSS02

Cet exercice vous accompagne dans la modification pas à pas d’une page web existante via CSS.

Avant de commencer l’exercice

La page HTML de base est structurée en 5 zones identifiées grâce à des classes. Ces 5 zones ont déjà été colorées en CSS pour une meilleure visibilité, ne supprimez donc pas tout de suite les couleurs. Les images ci-dessous illustrent la page au départ de l’exercice et un résultat final possible

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine local sur votre ordinateur. Ce dossier sera votre dossier de travail et devra contenir tous vos fichiers. Veillez à le nommer correctement par exemple exo-css02.

Téléchargez la page .html, la feuille de styles .css et l’image nécessaires pour cet exercice.

Placez les trois fichiers que vous venez de télécharger dans votre dossier racine local.

Ouvrez les fichiers .html et .css dans votre éditeur et en parallèle le fichier .html dans un navigateur.

Paramètres par défaut de la page HTML

Attention
Lorsque la question commence par CSS, cela signifie que vous devez modifier le fichier .css et lorsque elle commence par HTML, vous devez donc modifier le fichier .html.

CSS : Modifiez le contenu de la page en personnalisant l’élément utilisant la classe page avec les paramètres suivant :

Attention
Pensez à ne jamais mettre d’espace entre une mesure et son unité, cela pose problème sur certains navigateurs. Par exemple, 20px mais pas 20 px.

Remarque
Le centrage horizontal d’un élément de type bloc peut se faire en lui appliquant une dimension et des marges externes automatiques à gauche et à droite avec margin.

CSS : Utilisez le sélecteur body afin de modifier la page en respectant les consignes suivantes :

Mise en forme de l’en-tête de la page HTML

CSS : En utilisant le sélecteur .entete, modifiez l’en-tête de la page en respectant les consignes suivantes :

  • Modifiez la couleur d’arrière-plan
  • Ajoutez une marge extérieure au dessus et au dessous de 20px et une marge nulle pour la gauche et la droite
  • Ajoutez une marge intérieure de 10px. Propriété padding
  • Ajoutez une hauteur de 80px pour l’élément. Propriété height
  • Ajoutez une bordure normale (solid) autour de l’élément. Propriété border-style
  • Réglez la largeur de la bordure à 3px. Propriété border-width
  • Réglez la couleur de la bordure. Propriété border-color
  • Ajoutez des arrondis de 10px à la bordure. Propriété border-radius

HTML : Ajoutez une class à l’élément <div> contenant le titre du site et une autre class à celui contenant le slogan du site afin de pouvoir les sélectionner en CSS pour les personnaliser.

CSS : Personnalisez les deux éléments identifiés précédemment :

  • Modifiez la taille des caractères
  • Modifiez la couleur du texte

CSS : Modifiez le « titre du site » afin qu’il soit en gras. Propriété font-weight

HTML : Personnalisez les textes du titre et du slogan de votre page web.

Ajout du logo

CSS : En utilisant le sélecteur .entete, modifiez l’en-tête de la page en ajoutant le logo en arrière-plan. Quel est le problème ?

background-image: url('css_exercice_mise_en_forme_02_logo.png') ;

CSS : Réglez le problème identifié à la question précédente en annulant la répétition. Propriété background-repeat. Est-ce qu’il y a encore un problème ?

CSS : Ajoutez une marge interne à gauche suffisamment importante pour éviter que le titre et le slogan de votre site n’empiètent sur le logo. Encore un soucis ?

CSS : Si vous le souhaitez, vous pouvez ajustez la position de l’arrière-plan avec la propriété background-position.

Mise en forme du menu de la page

CSS : En utilisant le sélecteur .menu, effectuez les modifications suivantes :

  • Ajoutez une marge extérieure au dessus et au dessous de 20px (et donc de 0 à gauche et à droite).
  • Ajoutez une marge intérieur de 10px.
  • Modifiez la couleur d’arrière-plan.
  • Ajoutez la même bordure que pour l’en-tête.

CSS : En utilisant le sélecteur .menu li, correspondant aux éléments li à l’intérieur d’un élément utilisant la classe menu, effectuez les modifications suivantes :

  • Supprimez les puces de la liste : list-style-type
  • Convertissez les lignes en éléments de type inline : display: inline ;
  • Ajoutez une marge interne à droite et a gauche des éléments de 20px

CSS : En utilisant le sélecteur adapté modifiez les liens du menu :

  • Supprimez le soulignement des liens du menu : text-decoration
  • Modifiez la couleur des liens du menu

CSS : Modifiez la couleur du texte des liens au survol de la souris en utilisant le pseudo sélecteur :hover.

Mise en forme du contenu de la page

CSS : En utilisant le sélecteur adapté permettant de cibler le contenu principal de la page, effectuez les modifications suivantes :

  • Ajoutez une marge extérieure de 20px au dessus de l’élément.
  • Ajoutez une marge intérieure de 10px.
  • Mettez la couleur d’arrière-plan en blanc.
  • Ajoutez la même bordure que précédemment (sans les arrondis)
  • Ajoutez des arrondis de 10px uniquement sur les coins du haut

CSS : En utilisant les sélecteurs adaptés personnalisez les titres de niveau 1 et les titres de niveau 2 :

  • Modifiez la couleur du texte
  • Modifiez les marges

Mise en forme du pied de page

CSS : En utilisant le sélecteur adapté permettant de cibler le pied de page, effectuez les modifications suivantes :

  • Ajoutez une marge de 20px au dessous de l’élément
  • Ajoutez une mage intérieure de 10px
  • Modifiez la couleur d’arrière-plan
  • Ajoutez la même bordure que précédemment (sans les arrondis) uniquement pour les bords gauche, droit et bas.
  • Ajoutez des arrondis de 10px uniquement sur les coins du bas.
  • Alignez le contenu à droite. Propriété text-align
  • Modifiez la couleur du texte

HTML : Modifiez le contenu du pied de page en saisissant le texte de votre choix.

Finalisation de la mise en forme du contenu de la page

CSS : Modifiez à votre convenance la mise en forme des liens.

HTML : Mettez plusieurs éléments de votre choix en emphase importante strong et faible em.

CSS : Modifiez à votre convenance la mise en forme des éléments en emphase.

CSS : Si besoin, ajustez les couleurs d’arrière-plan, de texte et/ou de bordure pour les adapter à votre goût.

Correction

Les fichiers de correction sont téléchargeables ci-dessous :

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.