Introduction aux sélecteurs

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

En CSS, les sélecteurs sont des modèles utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Ils constituent une partie cruciale des règles CSS, car ils déterminent à quels éléments les styles seront appliqués.

Il existe différents types de sélecteurs, chacun ciblant les éléments de différentes manières. Comprendre les sélecteurs est fondamental pour maîtriser le CSS et créer des pages web bien stylisées.

Voici une règle CSS de base avec un sélecteur :

selector {
    property: value;
}

selector : Cible les éléments HTML à styliser.
property : L’attribut de style que vous souhaitez modifier (par exemple, color, font-size).
value : La valeur que vous souhaitez définir pour la propriété (par exemple, blue, 16px).

Par exemple :

p {
    color: blue;
    font-size: 16px;
}

Dans cet exemple, p est le sélecteur, ciblant tous les éléments de paragraphe. Les déclarations définissent la couleur du texte sur bleu et la taille de la police à 16 pixels pour tous les paragraphes.

Défi

Facile

Un document HTML vous est fourni. Utilisez du CSS interne pour styliser le document avec les propriétés suivantes :

Définissez la couleur d'arrière-plan de tous les titres h1 sur green.
Définissez la couleur du texte de tous les titres h1 sur white.
Définissez la taille de la police de tous les paragraphes (p) sur 18px.

Un code CSS de départ vous est fourni.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>