Exercice - Appliquez un style à votre HTML avec CSS

  • 10 minutes

Les feuilles de style en cascade (CSS, Cascading Style Sheets) vous permettent de spécifier l’apparence de votre page. L’idée de base est de définir le style à appliquer aux éléments que vous utilisez dans vos pages HTML. Les éléments HTML définissent votre contenu, alors que les styles CSS définissent l’apparence de ce contenu.

Par exemple, vous pouvez appliquer des angles arrondis ou donner un arrière-plan dégradé à un élément, ou vous pouvez utiliser CSS pour spécifier l’apparence et la réponse des liens hypertexte lorsque vous interagissez avec eux. Vous pouvez également réaliser des mises en page sophistiquées et des effets d’animation.

Il est possible d’appliquer des styles à des éléments en particulier ou à tous les éléments d’un type donné, ou d’utiliser des classes pour définir le style de nombreux éléments différents.

Dans cet exercice, vous appliquez des styles CSS à des éléments de page HTML. Ensuite, vous ajouterez du code CSS pour définir votre thème clair et votre thème sombre. Ensuite, vous vérifiez les résultats dans les outils de développement de votre navigateur.

CSS externe

Dans l’unité précédente sur le HTML, vous avez lié un fichier CSS externe à partir du HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Un des avantages du CSS externe est que plusieurs pages HTML peuvent être liées au même fichier CSS. Si vous apportez un changement au CSS, votre style est mis à jour pour chaque page. Lorsque vous utilisez un fichier HTML pour votre contenu de page, un fichier CSS pour le style et un fichier JavaScript pour l’interaction, il s’agit de la séparation des préoccupations.

Comme décrit précédemment, vous pouvez également écrire des CSS directement en HTML, ce qui est appelé CSS interne. Même pour un site web de base, il y a tellement de règles CSS que la page HTML peut rapidement devenir encombrée. Avec plusieurs pages, le même code CSS serait souvent répété et difficile à gérer.

Règles de CSS

Les règles CSS sont un moyen d’appliquer des styles aux éléments HTML. Les règles CSS ont un sélecteur, qui est utilisé pour exprimer l’élément (ou les éléments) auquel les styles doivent être appliqués.

Dans Visual Studio Code, ouvrez le fichier main.css, puis entrez ce qui suit :

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Cet extrait de code contient deux règles. Chaque règle se compose des éléments suivants :

  • Un sélecteur. body et ul sont les sélecteurs des deux règles. Ils sont utilisés pour sélectionner chaque élément auquel les styles s’appliquent.
  • Une accolade ouvrante ({).
  • Liste des déclarations de style qui déterminent le ou les éléments sélectionnés.
  • Une accolade fermante (}).

Par exemple, le sélecteur ul sélectionne l’élément HTML <ul> dans la page auquel il doit appliquer les styles. La déclaration est font-family: helvetica et détermine le style. Le nom de la propriété est font-family, et la valeur est helvetica.

Comme vous allez le voir, vous pouvez définir vos propres noms personnalisés pour des éléments.

Sélecteurs

Les sélecteurs d’ID et de classe vous permettent d’appliquer des styles aux noms d’attributs personnalisés dans votre code HTML. Vous utilisez un ID pour styliser un élément, tandis que vous utilisez des classes pour styliser plusieurs éléments.

  1. Copiez le code suivant et ajoutez-le à votre fichier CSS. Collez-le après l’accolade fermante pour le sélecteur ul que vous avez ajouté précédemment.

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    Le code précédent contient trois règles CSS ; les deux dernières utilisent des attributs personnalisés pour sélectionner des éléments : .list et #msg.

    • .list est un sélecteur de classe. Chaque élément HTML qui contient un attribut class défini sur list hérite les styles définis dans ce sélecteur.

    • #msg est un sélecteur d’ID. L’élément HTML dont l’attribut id est défini sur msg hérite les styles définis dans ce sélecteur.

    Les noms que vous utilisez pour vos sélecteurs peuvent être arbitraires, à condition qu’ils correspondent à ce que vous avez défini dans le HTML.

  2. Enregistrez votre travail en sélectionnant Control+S sur Windows ou Command+S sur macOS.

Afficher dans le navigateur

  1. Pour afficher un aperçu à l’aide de Visual Studio Code, cliquez avec le bouton droit sur le index.html fichier dans l’Explorateur, puis sélectionnez Ouvrir dans le navigateur par défaut.

    Important

    Même si vous avez simplement modifié le fichier main.css, pour obtenir un aperçu des changements, vous devez sélectionner le fichier index.html.

    La page web s’ouvre dans votre navigateur par défaut.

    Capture d’écran du site web avec les styles de police appliqués.

Les styles de police sont-ils ceux que vous attendiez ? Il est intéressant de savoir comment les styles appliqués à l’élément <body> sont hérités sur l’élément <h1>. Nous n’avions rien défini pour l’élément <h1>, mais il a tout de même obtenu la police définie sur <body>. Ce mécanisme d’héritage entre les éléments parents et leurs descendants est l’un des aspects essentiels de CSS. Toutefois, les éléments <li> ont une police différente. Le style des éléments <li> remplace le jeu de style pour <body> , car l’élément <li> est un descendant de l’élément <ul> pour lequel vous avez défini un style.

Lorsque vous utilisez Open In Default Browser dans Visual Studio Code, il ouvre un nouvel onglet dans le navigateur à chaque fois. Pour éviter l’ouverture d’un nouvel onglet, Vous pouvez simplement actualiser l’onglet qui contient déjà votre site web.

Pour recharger l’onglet, appuyez sur F5, qui est le raccourci clavier d’actualisation, ou appuyez sur Ctrl+R sur Windows ou Linux, et Command+R sur un Mac.

Ajouter un thème clair

Ensuite, ajoutez la prise en charge d’un thème de couleur pour votre site web. Commencez par définir un thème de couleur claire à l’aide de codes de couleurs hexadécimaux.

  1. Dans votre fichier CSS (main.css), ajoutez le code suivant à la fin du fichier.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    Dans cet exemple, #000000 spécifie le noir comme couleur de police et #00FF00 le vert comme couleur d’arrière-plan.

  2. Dans votre fichier HTML (index.html), mettez à jour l’élément <body> avec le nom de classe light-theme. À présent, le sélecteur de classe pour le thème clair applique correctement les styles.

    <body class="light-theme">

Afficher dans le navigateur

  • Pour afficher un aperçu à l’aide de Visual Studio Code, cliquez avec le bouton index.htmldroit, puis sélectionnez Ouvrir dans le navigateur par défaut ou rechargez l’onglet précédent en appuyant sur F5.

    Notez que le thème clair utilisant un arrière-plan vert s’affiche.

    Capture d’écran du site web avec son thème clair appliqué.

Afficher le CSS appliqué

  1. Dans la vue du navigateur, ouvrez Outils de développement.

    Cliquez avec le bouton droit sur la page, puis sélectionnez Inspecter, ou sélectionnez le raccourci F12 ou Ctrl+Maj+I.

  2. Sélectionnez l’onglet Éléments et sélectionnez l’onglet Styles dans l’onglet Éléments (il doit déjà être sélectionné par défaut).

  3. Pointez sur les différents éléments HTML et, lorsque vous sélectionnez quelques éléments, notez comment les outils de développement affichent les styles qui leur sont appliqués dans l’onglet Styles .

  4. Sélectionnez l’élément <body>. Notez le light-theme appliqué.

  5. Sélectionnez l’élément <ul> dans la liste non ordonnée. Notez le style font-family: helvetica; personnalisé, qui remplace le style de l’élément <body>.

Capture d’écran du site web avec son thème clair appliqué et outils de développement en regard de celui-ci montrant le panneau Éléments avec le code HTML et CSS.

Pour en savoir plus sur l’affichage des styles CSS dans les outils de développement, consultez l’article Prise en main de l’affichage et de la modification de CSS .

Ajouter un thème sombre

Pour le thème sombre, vous allez mettre en place l’infrastructure en préparation de l’unité suivante, dans laquelle vous activerez le changement de thème sur la page web.

Pour ajouter la prise en charge d’un thème sombre à votre CSS, suivez les étapes suivantes.

  1. Dans votre fichier CSS (main.css), ajoutez des constantes à la racine de la page au début du fichier.

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    Le sélecteur :root représente l’élément <html> dans la page HTML. Pour ce type de tâche, une bonne pratique consiste à définir un ensemble de variables CSS globales dans une règle CSS à l’aide du sélecteur :root. Dans cet exemple, vous avez défini trois variables de couleur. Vous pouvez maintenant utiliser ces variables dans d’autres règles CSS.

  2. À la fin du fichier CSS, remplacez la règle light-theme par le code suivant pour le mettre à jour et ajouter le sélecteur dark-theme.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    Dans le code précédent, vous avez défini deux nouvelles variables, bg et fontColor, pour définir une couleur d’arrière-plan et une couleur de police. Ces variables utilisent le mot clé var pour définir leurs valeurs de propriété sur les variables précédemment spécifiées dans votre sélecteur :root.

  3. Ensuite, dans votre fichier CSS, remplacez le sélecteur body actuel par le code suivant.

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

    Dans cet exemple, vous utilisez le sélecteur body pour définir les propriétés background et color, mais comme les éléments visibles sur la page web sont tous inclus dans l’élément <body>, ils héritent les couleurs définies pour <body>.

  4. Dans votre fichier CSS, supprimez les règles avec les sélecteurs #msg et ul afin que les éléments héritent aussi la même police de <body>.

  5. N’oubliez pas d’enregistrer votre fichier en sélectionnant Control+S ou Command+S.

    L’ensemble du fichier CSS main.css doit maintenant se présenter comme cet exemple :

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. Pour afficher le thème sombre, ouvrez le fichier index.html, remplacez manuellement le thème par défaut dans l’attribut de classe <body> par le thème sombre (dark-theme). Enregistrez le fichier, puis rechargez la page dans le navigateur.

    Capture d’écran du site web avec son thème sombre appliqué et les outils de développement en regard de celui-ci.

  7. Modifiez l'attribut class de <body> pour revenir au thème clair par défaut.

Dans l’unité suivante, vous utilisez JavaScript pour assurer l’interactivité et prendre en charge le changement de thème.

Utiliser GitHub Copilot pour ajouter un thème

Vous pouvez utiliser GitHub Copilot dans votre IDE pour générer css pour ajouter un nouveau thème. Vous pouvez personnaliser l’invite pour spécifier des propriétés pour définir les styles des éléments HTML en fonction de vos besoins.

Le texte suivant montre un exemple d’invite pour Copilot Chat :

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot est alimenté par l’IA, donc les surprises et les erreurs sont possibles. Pour plus d’informations, consultez les QUESTIONS fréquentes (FAQ) copilot.

En savoir plus sur GitHub Copilot dans Visual Studio Code.