Défi récapitulatif n°1
Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 23 sur 76.
Défi
FacileDans 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 :
- É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.
- É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.
- Écrivez une règle CSS qui cible tous les éléments
<li>.- Définissez le font-weight sur 600.
- É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
4Les bases du texte
Couleur du texteFamille de policesTaille de policeGraisse de policeAlignement du texteDécoration du texteDéfi récapitulatif n°1Défi récapitulatif n°27Modèle de boîte - Partie 1
Qu'est-ce que le Modèle de boîte ?PaddingMargesBorduresLargeur et HauteurDéfi récapitulatif5Couleurs et arrière-plans
Couleur d'arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n°1