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.

Aperçu de l'exercice avant/après
Aperçu de l’exercice avant/après

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 (Brackets, Notepad++, Visual Studio Code, etc).

Ouvrez le fichier .html dans un navigateur pour voir la version interprétée de la page. Si les couleurs ne sont pas visibles comme dans l’aperçu ci-dessous, vérifiez que la ligne 8 du fichier .html fait bien référence à votre fichier .css.

Aperçu initial de l'exercice

Paramètres par défaut de la page HTML

À partir de maintenant, lorsque la question commence par CSS, cela signifie que vous devez modifier le fichier .css et lorsque elle commence par HTML, vous devez 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 :

Remarque  :

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 2 :

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.

Modification de l'élément page
Solution CSS :
.page {
    width: 900px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
}

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

Modification de body
Solution CSS :
body {
    background-color: #cccccc ;
    font-size: 0.8rem ;
    /* Le nom de la police contient deux mots, il faut donc des guillemets */
    font-family: "Trebuchet MS" ;
}

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 :

Personnalisation de l'en-tête
Solution CSS :
.entete {
    background-color: #ffd3f9;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    height: 80px;
}

CSS : Toujours en utilisant le sélecteur .entete, rajoutez une bordure sur l’en-tête de la page.

Solution CSS :
.entete {
    background-color: #fee5ee;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    height: 80px;
    border-style: solid;
    border-width: 3px;
    border-color: #e23274; 
    border-radius: 10px;
}

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

Solution HTML :
<div class="page">
    <div class="entete">
        <div class="site-titre">Titre du site</div>
        <div class="site-slogan">Slogan du site</div>
    </div>

CSS : En utilisant les deux classes que vous avez ajoutées à la question précédente, personnalisez le titre et le slogan en réglant les paramètres suivants :

  • Modifiez la taille des caractères ;
  • Modifiez la couleur du texte.
Solution CSS :
.site-titre{
    font-size: 1.85rem;
    color: #e23274 ;
}
.site-slogan{
    font-size: 1.1rem;
    color: #7f3f98;
}

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

Ajout du gras sur le titre
Solution CSS :
.site-titre{
    font-size: 1.85rem;
    color: #e23274;
    font-weight: bold;
}

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

Solution HTML :
<div class="page">
    <div class="entete">
        <div class="site-titre">Lotus Institute</div>
        <div class="site-slogan">To make you feel relaxed</div>
    </div>

Ajout du logo

CSS : Modifiez l’en-tête de la page pour ajouter le logo en arrière-plan.

background-image: url('css_exercice_mise_en_forme_02_logo.png');
Ajout du logo
Solution CSS :
.entete {
    background-color: #fee5ee;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    height: 80px;
    border-style: solid;
    border-width: 3px;
    border-color: #e23274; 
    border-radius: 10px;
    background-image: url('css_exercice_mise_en_forme_02_logo.png');
}

CSS : Annulez la répétition du logo en utilisant la propriété background-repeat.

Suppression de la répétition du logo
Solution CSS :
.entete {
    background-color: #fee5ee;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    height: 80px;
    border-style: solid;
    border-width: 3px;
    border-color: #e23274; 
    border-radius: 10px;
    background-image: url('css_exercice_mise_en_forme_02_logo.png');
    background-repeat: no-repeat;
}

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.

Décalage du titre
Solution CSS :
.entete {
    background-color: #fee5ee;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    padding-left:190px;
    height: 80px;
    border-style: solid;
    border-width: 3px;
    border-color: #e23274; 
    border-radius: 10px;
    background-image: url('css_exercice_mise_en_forme_02_logo.png');
    background-repeat: no-repeat; 
}

Notez que placer le logo en CSS n’est pas une bonne idée… Il aurait été préférable de le placer directement dans le code HTML car il aurait ainsi été possible d’ajouter un lien hypertexte sur le logo. Sur la plupart des sites web, le logo permet de revenir sur la page d’accueil.

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 de 0 à gauche et à droite ;
  • Ajoutez une marge intérieur de 10px ;
  • Modifiez la couleur d’arrière-plan ;
  • Arrondissez les angles comme pour l’en-tête.
Modification du menu
Solution CSS :
.menu {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #7f3f98;
    border-radius: 10px;
}

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 à gauche des éléments de 20px.
Mise en place du menu horizontal
Solution CSS :
.menu li {
    list-style-type: none;
    display: inline;
    padding-left: 20px;
    padding-right: 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.
Sélecteur :

À la question précédente, vous avez utilisé le sélecteur .menu li, correspondant aux éléments <li> à l’intérieur d’un élément utilisant la classe menu.

Vous souhaitez maintenant manipuler les éléments <a> à l’intérieur d’un élément utilisant la classe menu

Solution CSS :
.menu a {
    color: #ffffff;
    text-decoration: none;
}

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

Solution CSS :
.menu a:hover {
    color: #ffc1d7;
}

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 pour l’en-tête ;
  • Ajoutez des arrondis de 10px uniquement sur les coins du haut.
Indice pour les bords arrondis :
Solution CSS :
.contenu {
    margin-top: 20px;
    padding: 10px;
    background-color: #ffffff;
    border: 3px solid #e23274;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

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.
Personnalisation des titres
Solution CSS :
h1 {
    color: #7f3f98;
    margin: 20px;
}
h2{
   color: #7f3f98;
   margin: 20px ; 
   margin-left: 60px;
}

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) ;
  • Ajoutez des arrondis de 10px uniquement sur les coins du bas ;
  • Alignez le contenu à droite : propriété text-align ;
  • Modifiez la couleur du texte.
Mise en forme du pied de page
Solution CSS :
.pieddepage {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e23274;
    border: 3px solid #e23274;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-width: 0;
    text-align: right;
    color: #ffffff;
}

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.

Solution CSS :
a {
    color: #e23274;
    font-weight: bold;
}
a:hover {
    color: #7f3f98;
}

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.

S’abonner
Notification pour
guest

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

1 Commentaire
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Alexandre Bozon
Alexandre Bozon
1 année il y a

Manque de précisions dans les dernières parties, impossible de réussir l’exercice pour ma part… J’ai tenté de copier la correcition là où je n’ai pas réussi mais j’ai abandonné car cela modifiait d’autres détails ??