Défi récapitulatif n°1

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

Défi

Facile

Maintenant que vous maîtrisez diverses techniques pour styliser le texte et les arrière-plans à l'aide de CSS, il est temps de mettre vos connaissances à l'épreuve avec un défi complet. Vous appliquerez ce que vous avez appris sur les couleurs, les codes hexadécimaux, les valeurs RGB et la transparence avec RGBA pour créer un design spécifique.

On vous donne un document HTML avec un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser les propriétés de style de texte et d'arrière-plan 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 white, la background-color sur #000080 (bleu marine) et le text-align sur center.
Écrivez une règle CSS qui cible l'élément <p>. Définissez la color sur #FFFFFF (blanc), la background-color sur rgba(0, 0, 0, 0.5) (noir semi-transparent) et la font-size sur 18px.
Écrivez une règle CSS qui cible l'élément <div>. Définissez la background-color sur rgba(237, 170, 26, 1) (jaune doré) et la color sur white.

Essayez vous-même

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>