Les feuilles de style en cascade (CSS) révolutionnent l'apparence de vos pages web. Des polices et couleurs aux espacements et mises en page, de nombreux outils de design sont à votre disposition. Bien que le CSS soit un langage riche et complexe, deux concepts fondamentaux suffisent pour débuter : les sélecteurs et les déclarations.
Tout commence par l'identification précise de l'élément à styliser.
Un fichier CSS regroupe des règles indiquant comment formater un document HTML. Chaque règle se compose de deux parties : quoi styliser (via des sélecteurs) et comment le styliser (via des déclarations).
Les exemples de cet article mettent l'accent sur les sélecteurs, avec des déclarations pour plus de clarté. Historiquement divisés en niveaux (versions), les sélecteurs sont aujourd'hui supportés à plus de 99 % par les navigateurs mondiaux (source : Can I Use, 2020).
Les quatre types de base couvrent la majorité des cas d'usage.
| Modèle | Matchs |
|---|---|
E | Tous les éléments E |
.c | Tous les éléments avec class="c" |
#myid | L'élément avec id="myid" |
E F | Un élément F à l'intérieur d'un élément E (descendant) |
| Pseudo-classes | E:link : Lien non visitéE:visited : Lien visitéE:active : Lien activé |
| Pseudo-éléments | E::first-line : Première ligne d'un élément EE::first-letter : Première lettre d'un élément E |
Le plus simple : cible toutes les instances d'un élément.
p { margin-bottom: 0; }
b { font-family: sans-serif; }Applique une sémantique supplémentaire via l'attribut class.
.intro { font-weight: bold; }Correspond à :
<p class="intro">…</p>Ou même :
<ul class="intro">…</ul>Pour limiter aux paragraphes : p.intro.
L'id est unique dans le document.
<div id="contents">…</div>#contents { color: #333; }Cible un élément par son contexte hiéarchique (DOM).
table b { font-weight: normal; }Ils ciblent des états ou parties virtuelles.
p::first-line { text-transform: uppercase; }Séparez par des virgules pour appliquer les mêmes règles.
th, td { padding: 1em; }En cas de conflit, la règle la plus spécifique l'emporte :
1. ID (#contents)
2. Classes (.author)
3. Types (p)
p.intro { color: black; }
p { color: gray; }Exemple : #contents > article.news p.author.special.
| Modèle | Matchs |
|---|---|
* | Tout élément |
E > F | F enfant direct de E |
E + F | F immédiatement après E (frère adjacent) |
| Sélecteurs d'attributs | E[foo] : Avec attribut fooE[foo="bar"] : foo exactement "bar"E[foo~="bar"] : foo liste contenant "bar"E[foo|="en"] : foo commençant par "en-" |
| Pseudo-classes | E:first-child : Premier enfantE:lang(fr) : Langue "fr" |
| Pseudo-éléments | E::before / E::after : Contenu généré |
* { margin: 0; }a[title] { text-decoration: underline; }Seulement les enfants directs.
h1 + p { font-weight: bold; }Certaines propriétés (ex. : font-family) se propagent des ancêtres. Ciblez généreusement (ex. : body) pour l'efficacité.
| Modèle | Matchs |
|---|---|
E ~ F | F après E (frères généraux) |
| Sélecteurs d'attributs | E[foo^="bar"] : Commence par "bar"E[foo$="bar"] : Termine par "bar"E[foo*="bar"] : Contient "bar" |
| Pseudo-classes | E:nth-child(n), :root, :empty, :checked, :not(s), etc. |
h1 ~ p { font-size: 110%; }Vous maîtrisez désormais les sélecteurs pour styliser précisément vos pages. Explorez les propriétés CSS pour couleurs, mises en page et plus !
Crédit image : Pankaj Patel/Unsplash
[]