Défi de sélection

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

Défi

Facile

Vous disposez d'un document HTML avec divers éléments, notamment des titres (<h1>, <h2>), des paragraphes (<p>), une division (<div>) et une liste non ordonnée (<ul>) avec des éléments de liste (<li>). Votre tâche consiste à utiliser différents types de sélecteurs pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant un sélecteur de type qui cible tous les éléments <p>. Définissez la couleur du texte sur blue et la taille de la police sur 16 pixels.
Ajoutez un attribut class avec la valeur "highlight" à l'élément <h2> et à l'élément <div>.
Écrivez une règle CSS utilisant un sélecteur de classe qui cible tous les éléments ayant la classe "highlight". Définissez la couleur d'arrière-plan sur yellow.
Ajoutez un attribut id avec la valeur "special" à l'élément <ul>.
Écrivez une règle CSS utilisant un sélecteur d'ID qui cible l'élément avec l'ID "special". Définissez la couleur d'arrière-plan sur lightgray et la taille de la police sur 20 pixels.
Écrivez une règle CSS utilisant un sélecteur de groupe qui cible tous les éléments <h1> et <li>. Définissez la couleur du texte sur red.

Essayez vous-même

<html>
<head>
    <title>Selection Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>