Défi récapitulatif n° 1

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 29 sur 76.

Défi

Facile

Maintenant que tu maîtrises différentes techniques pour styliser le texte et les arrière-plans à l’aide de CSS, il est temps de mettre tes connaissances à l’épreuve avec un défi complet. Tu appliqueras ce que tu as appris sur les couleurs, les codes hexadécimaux, les valeurs RGB et la transparence avec RGBA afin de créer un design spécifique.

On te fournit un document HTML contenant un titre (<h1>), un paragraphe (<p>) et une division (<div>). Ta tâche consiste à utiliser les propriétés de style du texte et de l’arrière-plan que tu as apprises pour styliser ces éléments afin qu’ils correspondent au design présenté dans l’image ci-dessous :

Suis les étapes ci-dessous :

Écris une règle CSS qui cible l’élément <h1>. Définis la color sur white, la background-color sur #000080 (bleu marine) et la text-align sur center.
Écris une règle CSS qui cible l’élément <p>. Définis la color sur #FFFFFF (blanc), la background-color sur rgba(0, 0, 0, 0.5) (noir semi-transparent) et la font-size sur 18px.
Écris une règle CSS qui cible l’élément <div>. Définis 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>