Défi récapitulatif n°2

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

Défi

Facile

Dans ce deuxième 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, pour correspondre à un design donné.

On vous donne un document HTML avec un titre (<h1>), un paragraphe (<p>), un lien (<a>) et une liste non ordonnée (<ul>) avec des éléments de liste (<li>). Votre tâche consiste à utiliser les propriétés de style de texte que vous avez apprises pour styliser ces éléments afin qu'ils correspondent au design illustré dans l'image ci-dessous :

Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez la color sur black, la font-family sur "Times New Roman", Times, serif, la font-size sur 48px, le font-weight sur bold et le text-align sur center.
Écrivez une règle CSS qui cible l'élément <p>. Définissez la color sur gray, la font-family sur Arial, Helvetica, sans-serif, la font-size sur 18px et le text-align sur center.
Écrivez une règle CSS qui cible l'élément <a>. Définissez la color sur red, la text-decoration sur none.
Écrivez une règle CSS qui cible tous les éléments <li>. Définissez la color sur green, la font-family sur "Courier New", Courier, monospace, la font-size sur 25px et le font-weight sur 600.

Essayez vous-même

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>