Introduction aux sélecteurs

Fait partie de la section Styling with 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 ex., color, font-size).
value : La valeur que vous souhaitez définir pour la propriété (par ex., 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.

Aide-mémoire

Les sélecteurs CSS sont des motifs utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Ils déterminent à quels éléments les styles seront appliqués.

Structure de base d'une règle CSS :

selector {
    property: value;
}

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

Exemple ciblant tous les éléments de paragraphe :

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

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>