Mise en forme en CSS : Pas à pas 01 CSS01

Créez un nouveau dossier 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.

Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

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 (Visual Studio Code, Brackets, Notepad++, etc) et en parallèle le fichier .html dans un navigateur (Firefox, Chrome, Opera, etc). 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
• Mac OsX

Sur Windows, suivez les manipulations suivantes :

1. Faites un clic droit sur un fichier HTML.
2. Choisissez l’option Ouvrir avec puis Choisir une autre application.
3. Dans la fenêtre qui s’ouvre, sélectionnez l’application de votre choix.
4. Cochez la case Toujours utiliser cette application pour ouvrir les fichiers .html.
5. Validez avec OK.

Sur Mac Os X, suivez les manipulations suivantes :

1. Faites un clic droit sur un fichier HTML.
2. Choisissez l’option Lire les informations.
3. Dans la fenêtre qui s’ouvre, sélectionnez l’application de votre choix dans le menu déroulant Ouvrir avec.
4. 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 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.

• Modifiez la couleur d’arrière-plan :
  • Propriété : background-color,
  • Exemples de valeur : yellow, red, etc,
  • https://developer.mozilla.org/fr/docs/Web/CSS/background-color ;
• Modifiez la taille de police :
  • Propriété : font-size,
  • Exemples de valeur : 0.8rem, 12px, etc,
  • https://developer.mozilla.org/fr/docs/Web/CSS/font-size ;
• Modifiez la police de caractère :
  • Propriété : font-family,
  • Exemples de valeur : arial, verdana, etc,
  • https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-family.

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,
  • https://developer.mozilla.org/fr/docs/Web/CSS/margin ;
• Modifiez les marges internes :
  • Propriété : padding,
  • https://developer.mozilla.org/fr/docs/Web/CSS/padding.

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

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></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 ;
  • https://developer.mozilla.org/fr/docs/Web/CSS/color

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

• Modifier le style des caractère pour les passer en italique :
  • Propriété : font-style,
  • https://developer.mozilla.org/fr/docs/Web/CSS/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 .pieddepage, personnalisez le pied de page :

• Modifiez la couleur d’arrière-plan ;
• Modifiez la couleur du texte ;
• Centrez le texte :
  • Proprpiété : text-align,
  • https://developer.mozilla.org/fr/docs/Web/CSS/text-align.

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

https://developer.mozilla.org/fr/docs/Web/CSS/line-height

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 : border-bottom: 5px solid purple ;

/* 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,
  • https://developer.mozilla.org/fr/docs/Web/CSS/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;
}