Introduction aux sélecteurs¶
Un sélecteur en CSS indique sur quels éléments d'une page HTML les styles doivent s'appliquer.
Les sélecteurs de base¶
1. Le sélecteur universel *¶
Le sélecteur * s'applique à tous les éléments HTML de la page.
Exemple :
* {
margin: 0;
padding: 0;
}
Cela permet de remettre à zéro les marges et espacements par défaut, pour avoir plus de contrôle.
2. Le sélecteur de balise¶
On peut cibler un type de balise HTML précise. Exemple :
h1 {
color: darkred;
}
Ici, tous les titres <h1> apparaîtront en rouge foncé.
3. Le sélecteur de balises enfants¶
On peut cibler les éléments enfants d'une autre balise. Exemple :
main p {
color: green;
}
Cela applique la couleur verte aux paragraphes qui sont à
l'intérieur du bloc <main>.
4. Le sélecteur d'identifiant¶
On peut cibler une balise spécifique à l'aide d'un identifiant qui la rend unique.
Ceci nécessite 2 étapes :
-
Identifier la balise dans le HTML
<p id="special_paragraphe">On peut cibler une balise spécifique à l'aide d'un identifiant qui la rend unique.</p> -
Appliquer des styles dans le CSS sur le sélecteur d'identifiant
#special_paragraphe { color: green; }
Cela applique la couleur verte au paragraphe qui a l'id "special_paragraphe".
En résumé¶
- Le CSS gère le style et la mise en forme des pages web.
- On sépare généralement le CSS dans un fichier externe (
style.css). - Une règle CSS =
sélecteur { propriété: valeur; } - Les sélecteurs de base à retenir :
- Sélecteur universel :
* - Sélecteur de balise : ex.
p,h1 - Sélecteur d'enfant dans un parent donné:
parent enfant(ex.main p)
Avec ces notions de base, tu peux déjà commencer à donner du style à tes pages HTML !