Mise en forme en CSS : Pas à pas 01 CSS01

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

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.

Ouvrez les fichiers .html et .css dans votre éditeur (Visual Studio Code, Phoenix Code, Notepad++, etc) et en parallèle le fichier .html dans un navigateur. Pour pouvoir ouvrir automatiquement vos pages web avec le navigateur de votre choix, vous pouvez changer le navigateur par défaut.

Changer le navigateur par défaut

Navigateur par défaut

Si vous souhaitez modifier le navigateur utilisé par défaut pour visualiser vos pages web, il suffit d’effectuer la manipulation correspondant à votre système d’exploitation.

Windows 10

Sur Windows, suivez les manipulations suivantes :

Faites un clic droit sur un fichier HTML.

Choisissez l’option Ouvrir avec puis Choisir une autre application.

Dans la fenêtre qui s’ouvre, sélectionnez l’application de votre choix.

Cochez la case Toujours utiliser cette application pour ouvrir les fichiers .html.

Validez avec OK.

macOs

Sur macOs, suivez les manipulations suivantes :

Faites un clic droit sur un fichier HTML et choisissez l’option Lire les informations.

Dans la fenêtre qui s’ouvre, sélectionnez l’application de votre choix dans le menu déroulant Ouvrir avec.

Cliquez sur le bouton Tout modifier….

HTML : Dans le fichier HTML, identifiez la ligne permettant de lier le fichier CSS à la page HTML et corrigez-la afin que la liaison se fasse correctement. Vous devriez voir les couleurs des différents éléments de la page qui ont déjà été positionnés.

<link rel="stylesheet" type="text/css" media="screen" href="css01-style.css">​

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

.page {    background-color: red;}

CSS : En utilisant le sélecteur d’élément body, gérer les paramètres par défaut de la page :

• Modifiez la couleur d’arrière-plan :
  • Propriété : background-color
  • Exemples de valeur : yellow, red, etc,
• Modifiez la taille de police :
  • Propriété : font-size
  • Exemples de valeur : 0.8rem, 12px, etc
• Modifiez la police de caractère :
  • Propriété : font-family
  • Exemples de valeur : arial, verdana, etc,

body {    background-color: blue ;    font-size: 0.9rem ;    font-family: "Trebuchet MS" ;}

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

• Modifiez les marges externes propriété : margin
• Modifiez les marges internes propriété : padding

body {    background-color: blue ;    font-size: 0.9rem ;    font-family: "Trebuchet MS" ;    margin: 0 ;    padding: 0 ;}

CSS : En utilisant le sélecteur de classe .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 classe (attribut class) différente à chacun des éléments <div></div> contenant les textes Titre du site et Notre slogan afin de pouvoir, par la suite, les sélectionner en CSS pour personnaliser leur mise en forme.

<div class="entete">    <div class="site_titre">Titre du site</div>    <div class="site_slogan">Slogan du site</div></div>

CSS : Grâce aux classes que vous venez d’ajouter, personnalisez les deux éléments identifiés précédemment :

• Modifiez la taille des caractères.
• Modifiez la couleur du texte.
  • Propriété : color
  • Exemples de valeur : yellow, purple, gold

.site_titre {    font-size: 2rem ;    color: green ;}.site_slogan {    font-size: 1.1rem ;    color: aquamarine ;}

CSS : Modifiez le slogan du site afin qu’il soit en italique avec la propriété : font-style.

HTML : Personnalisez les textes du titre et du slogan du site en remplaçant le texte existant par le texte de votre choix.

CSS : En utilisant le sélecteur de classe .pieddepage, personnalisez le pied de page :

• Modifiez la couleur d’arrière-plan.
• Modifiez la couleur du texte.
• Centrez le texte : propriété text-align

CSS : Toujours sur le sélecteur .pieddepage, ajoutez la propriété CSS permettant de définir la hauteur de ligne : line-height et réglez-la pour que sa valeur soit identique à la hauteur de la zone de pied de page.

CSS : En utilisant le sélecteur .colonne_contenu :

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

CSS : En utilisant le sélecteur h1, personnalisez les titres de niveau 1 :

• Modifiez la couleur d’arrière-plan des titres de niveau 1.
• Ajoutez une marge intérieure de 10px.
• Ajoutez une marge extérieure uniquement en dessous de 20px : margin-bottom.
• Ajoutez en dessous uniquement, une bordure épaisse de 5px, en trait continu avec la couleur de votre choix : propriété border.

/* La bordure peut également se régler en saisissant trois paramètres distincts */h1 {    border-bottom-style: solid;    border-bottom-width: 5px;    border-bottom-color: purple;}

CSS : En utilisant le sélecteur adapté, personnalisez les titres de niveau 2 :

• Modifiez la couleur du texte.
• Modifiez la taille des caractères.
• Ajoutez une marge extérieure de 20 pixels tout autour.
• Basculez le texte en petites capitales : propriété font-variant.

CSS : En utilisant le sélecteur strong, personnalisez l’aspect du texte sur lequel est appliquée une emphase forte :

• Modifiez la couleur du texte ;
• Supprimez le gras :
  • Propriété : font-weight,
  • https://developer.mozilla.org/fr/docs/Web/CSS/font-weight.

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.

Afficher un indice

Indice

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 bon sélecteur, modifiez le paragraphe introduction :

• Mettez le texte en italique ;
• Ajoutez une bordure tout autour du paragraphe ;
• Ajoutez une marge intérieure de 10px ;
• Ajoutez la propriété permettant d’arrondir les bords en la réglant à 10px :
  • Propriété : border-radius,
  • https://developer.mozilla.org/fr/docs/Web/CSS/border-radius.

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 :

• Changez la couleur du texte lors du survol des liens ;
• Supprimez le soulignement lors du survol des liens :
  • Propriété : text-decoration,
  • https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration

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 (ce qui correspond aux é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 (ce qui correspond aux éléments li ayant un parent avec la classe .colonne_menu) :

• Supprimez les puces de la liste :
  • Propriété : list-style-type,
  • https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type.

Si vous avez mis du noir comme couleur d’arrière-plan pour la page, vous aurez l’impression que les puces ont déjà disparu, mais ce n’est pas le cas. Vous pouvez modifiez la couleur d’arrière-plan de body pour vous en assurer.

CSS : En utilisant le sélecteur .colonne_menu li, continuez à personnalisez les lignes de la liste :

• Ajoutez une couleur d’arrière-plan ;
• Ajoutez une marge intérieure ET une marge extérieure de 5px ;
• Centrez le texte.

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

CSS : En utilisant le sélecteur adapté, personnalisez les liens du menu. Les autres liens (dans le contenu) ne doivent pas être impactés :

• Supprimez le soulignement ;
• Modifiez la couleur.

CSS : Vous aurez peut-être remarqué un petit détail… Les liens du menu ne fonctionnent que lorsque l’on survole le texte du lien mais pas lorsque l’on survole le rectangle correspondant à la ligne de la liste. Ce comportement est tout à fait normal, mais ce n’est pas très ergonomique.

Pour corriger le problème ajoutez la propriété display: block; pour les liens du menu, ajoutez une marge interne de 5px aux liens et supprimez la marge interne que nous avons mis précédemment sur les lignes de la liste avec .colonne_menu li.

.colonne_menu li {    list-style-type: none;    background-color: gold;    margin: 5px;​    text-align: center;}.colonne_menu li:hover {    background-color: Crimson;}.colonne_menu a {    color: black;    text-decoration: none;    display: block;    padding: 5px;}