Mise en forme en CSS : Pas à pas 01 CSS01

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

Avant de commencer l’exercice

Illustration des éléments de la page

La page HTML de base fournie est structurée en 6 zones identifiées en utilisant des classes. Ces 6 zones ont déjà été disposées en CSS (ne touchez pas au code correspondant). Le schéma suivant permet de mieux comprendre les différentes zones mises en place à l’intérieur de la page. Des couleurs d’arrière-plan ont été ajoutées aux différentes zones pour pouvoir en visualiser les limites.

Aperçu du fichier initial

Aperçu initial de l'exercice

Aperçu du résultat final

Aperçu final de l'exercice

Consignes de l’exercice

Préparation de l’exercice

Créez un nouveau dossier sur votre ordinateur à l’emplacement de votre choix et nommez-le exo-css01.

Ce dossier devra contenir tous les fichiers de votre exercice. C’est ce que l’on appelle le dossier racine local.

Téléchargez le fichier .html et la feuille de styles .css nécessaires pour cet exercice.

Si ce n’est pas déjà fait, placez les deux 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.

Conseil
Il est recommandé de travailler avec les navigateurs Firefox ou Chrome. Si la page .html s’ouvre avec un autre navigateur, vous pouvez associer l’ouverture par défaut d’une page html avec le navigateur de votre choix.

Attention !
Ne touchez aux premières lignes du fichier .css. Il s’agit des paramètres utilisés pour dimensionner et positionner les différentes zones de la page.

Gestion des 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 lorsqu’elle commence par HTML, vous devez donc modifier le fichier .html.

CSS : Supprimez la couleur d’arrière-plan appliquée à l’élément qui utilise la classe page.

CSS : En utilisant le sélecteur body, modifiez la couleur d’arrière-plan de la page ainsi que les paramètres de police utilisés par défaut pour l’ensemble de la page HTML.

CSS : Toujours avec le même sélecteur supprimez les marges internes et les marges externes du document afin que le contenu soit collé au bord supérieur de la fenêtre.

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

CSS : En utilisant le sélecteur .entete :

  • Ajoutez une marge intérieure de 10px ;
  • Modifiez la couleur d’arrière-plan de la zone d’en-tête.

HTML : Ajoutez une class aux deux éléments div (“titre du site” et “Notre slogan”) afin de pouvoir les sélectionner en CSS pour personnaliser leur mise en forme.

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

CSS : Modifiez le “slogan du site” afin qu’il soit en italique :

HTML : Personnalisez les textes du titre et du slogan du site. Saisissez un nouveau titre et un nouveau slogan de votre choix.

Mise en forme du pied de page

CSS : En utilisant le sélecteur .pieddepage :

Mise en forme du contenu de la page

CSS : En utilisant le sélecteur .colonne_contenu :

  • Modifiez la couleur d’arrière-plan de la zone.
  • Ajoutez une marge intérieure de 10px à la zone.

CSS : En utilisant le sélecteur h1 :

  • Modifiez la couleur d’arrière-plan des titres de niveau 1.
  • Ajoutez une marge intérieure de 10px aux titres de niveau 1.
  • Ajoutez une marge extérieure uniquement en dessous des titres de niveau 1 de 20px : margin-bottom
  • Ajoutez en dessous des titres de niveau 1 une bordure épaisse de 5px, en trait continu avec la couleur de votre choix : border-bottom: 5px solid purple ;
/* Version longue des bordures */
h1 {
    border-style: solid;
    border-width: 5px;
    border-color: purple;
}

CSS : En utilisant le sélecteur adapté :

CSS : En utilisant le sélecteur strong :

HTML : Ajoutez les balises adaptées sur plusieurs chaînes de caractères de votre choix afin de leur appliquer une emphase modérée.

CSS : En utilisant le sélecteur adapté, modifiez la couleur des chaînes de caractères mises en emphase modérée.

HTML : Ajoutez la classe introduction au paragraphe situé juste en dessous du titre de niveau 1.

CSS : En utilisant le sélecteur modifiez le paragraphe introduction :

CSS : Deux liens sont présents dans la page, avec le sélecteur adapté, ajoutez du gras sur les liens par défaut.

CSS : En utilisant la pseudo-classe :hover :

HTML : Personnalisez le texte du titre h1 en haut de la zone de contenu.

Mise en forme du menu de la page HTML

CSS : Afin de donner l’impression que la zone menu fait toute la hauteur de la page, modifiez la couleur d’arrière-plan de .colonnes et de .colonne_menu pour qu’ils aient la même. Vous pouvez utiliser le sélecteur .colonnes, .colonne_menu.

CSS : En utilisant le sélecteur .colonne_menu ul (les éléments ul ayant un parent avec la classe .colonne_menu), supprimez les marges internes ET externes de la liste à puces.

CSS : En utilisant le sélecteur .colonne_menu li (les éléments li ayant un parent avec la classe .colonne_menu) :

CSS : En utilisant le sélecteur adapté, ajoutez un effet de survol aux lignes de la liste. Définissez une couleur d’arrière-plan différente lors du survol.

CSS : En utilisant le sélecteur adapté (seulement les liens du menu sont concernés)

  • Supprimez le soulignement des liens du menu
  • Modifiez la couleur des liens du menu

Correction

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

Sauf mention contraire*, l'article Mise en forme en CSS : Pas à pas 01 [CSS01] 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.

1 réaction sur “ Mise en forme en CSS : Pas à pas 01 [CSS01] ”

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.