Menu
Coddy logo textTech

Défi récapitulatif n°1

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 23 sur 76.

challenge icon

Défi

Facile

Dans ce premier défi récapitulatif, vous appliquerez vos connaissances sur les propriétés de style de texte en CSS pour recréer un design spécifique. Ce défi testera votre capacité à combiner diverses propriétés de texte, telles que color, font-family, font-size, font-weight, text-align et text-decoration.

On vous donne un document HTML avec divers éléments. Votre tâche consiste à appliquer les différentes propriétés que vous avez apprises dans cette section pour styliser ces éléments. Suivez les étapes ci-dessous :

  1. Écrivez une règle CSS qui cible tous les éléments <h1>.
    • Définissez la couleur sur dark blue.
    • Définissez la taille de la police sur 32px.
    • Définissez l'épaisseur de la police sur bold.
    • Définissez l'alignement du texte sur center.
  2. Écrivez une règle CSS qui cible tous les éléments ayant la classe intro-text.
    • Définissez la couleur sur gray.
    • Définissez la font-family sur Arial, Helvetica, sans-serif;
    • Définissez la taille de la police sur 18px.
  3. Écrivez une règle CSS qui cible tous les éléments <li>.
    • Définissez le font-weight sur 600.
  4. Écrivez une règle CSS qui cible tous les éléments <a>.
    • Définissez la text-decoration sur none.
    • Définissez la police sur votre font-family préférée à  "Times New Roman", Times, serif.

Essayez vous-même

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>

Toutes les leçons de Styling with CSS