CSS — Les bases du style
Sélecteurs, couleurs, unités, Box Model et variables CSS
Concepts Théoriques
CSS (Cascading Style Sheets) contrôle l'apparence visuelle de votre page HTML. Si HTML est la structure de la maison, CSS est tout ce qui la rend belle — les couleurs, les dimensions, les polices, les espacements.
Comment lier un fichier CSS au HTML
Il existe 3 façons d'ajouter du CSS. Nous utiliserons exclusivement la méthode 3, qui est le standard professionnel :
- En ligne (inline) — style="color: red;" directement sur la balise. À ÉVITER : mélange structure et style, impossible à maintenir.
- Interne — balise <style> dans le <head>. Acceptable pour des tests rapides.
- Externe — <link rel="stylesheet" href="css/style.css"> dans le <head>. LA méthode standard. Un seul fichier CSS pour tout le site, modifiable en un seul endroit.
Anatomie d'une règle CSS
Une règle CSS suit toujours ce schéma :
sélecteur { propriété: valeur; propriété: valeur; }
Le sélecteur cible les éléments HTML à styler. La propriété est ce que vous changez (couleur, taille, marge). La valeur est le nouveau réglage.
Exemple : h1 { color: #00d4ff; font-size: 2.5rem; } signifie "tous les <h1> de la page auront la couleur #00d4ff et une taille de police de 2.5rem".
Les sélecteurs — cibler les éléments
Sélecteur élément — cible toutes les balises de ce type : p { } cible tous les <p>.
Sélecteur classe — cible tous les éléments avec cette classe : .card { } cible tous les éléments avec class="card". C'est le sélecteur le plus utilisé car les classes sont réutilisables.
Sélecteur ID — cible l'élément unique avec cet id : #hero { } cible l'élément avec id="hero". Réservez les ID pour le JavaScript et les ancres, pas pour le style.
Sélecteur descendant — cible les éléments à l'intérieur d'un autre : nav a { } cible les <a> qui sont DANS un <nav>.
Sélecteur enfant direct — nav > ul { } cible les <ul> enfants directs de <nav> (pas les sous-listes).
Pseudo-classes — ciblent un état : a:hover { } cible un <a> survolé par la souris. button:focus { } cible un bouton qui a le focus clavier.
Sélecteur attribut — input[type="email"] { } cible les <input> de type email.
> Bonne pratique : Utilisez des classes (.card, .btn, .highlight) pour presque tout votre style. Les classes sont réutilisables — vous pouvez mettre la même classe sur 10 éléments.
La cascade et la spécificité
Le "C" de CSS signifie "Cascading" (en cascade). Quand plusieurs règles ciblent le même élément, CSS détermine laquelle gagne selon la spécificité :
- Style inline (style="...") — le plus fort (à éviter)
- ID (#hero) — très fort (spécificité 100)
- Classe (.card) + pseudo-classes (:hover) — moyen (spécificité 10)
- Élément (p, h1) — faible (spécificité 1)
Si deux règles ont la même spécificité, la dernière dans le fichier gagne.
> Bonne pratique : Gardez une spécificité basse et uniforme en utilisant des classes partout. N'utilisez pas !important — c'est un pansement qui cache un problème d'architecture.
Le Box Model — comprendre l'espace
Chaque élément HTML est une boîte rectangulaire avec 4 couches :
- Content — Le contenu (texte, image). Sa taille est définie par width et height.
- Padding — L'espace intérieur entre le contenu et la bordure (comme le rembourrage d'un coussin).
- Border — La bordure visible autour de l'élément.
- Margin — L'espace extérieur entre cet élément et ses voisins (la distance entre deux meubles).
Le piège classique : par défaut, width: 300px ne comprend PAS le padding ni la bordure. Un élément de 300px avec 20px de padding de chaque côté fait en réalité 340px.
La solution : ajoutez cette règle au tout début de chaque projet :
*, *::before, *::after { box-sizing: border-box; }
Avec border-box, la largeur inclut le padding et la bordure. 300px fait VRAIMENT 300px.
Les unités de mesure
- px — Pixels fixes. Pour les bordures, ombres, très petits détails.
- rem — Relatif à la taille root (1rem = 16px par défaut). Votre unité par défaut pour les tailles de police, marges, paddings.
- % — Pourcentage du parent. Pour les largeurs de conteneurs flexibles.
- vh / vw — Pourcentage de la hauteur / largeur de la fenêtre. Pour les sections plein écran (100vh).
> Bonne pratique : Utilisez rem pour presque tout. C'est prévisible et accessible (respecte les préférences de taille de police de l'utilisateur).
Les couleurs
- Hexadécimal : #1a1a2e, #00d4ff — le format le plus courant
- RGB : rgb(0, 212, 255) — quand vous avez les valeurs Rouge/Vert/Bleu
- HSL : hsl(190, 100%, 50%) — le plus intuitif : Teinte, Saturation, Luminosité
- Avec transparence : rgba(0, 0, 0, 0.5) — noir à 50% de transparence
- Nommées : red, blue, tomato — 147 noms disponibles, pratiques pour tester
> Conseil : Utilisez coolors.co pour générer des palettes de couleurs harmonieuses.
Les variables CSS (Custom Properties)
Les variables vous permettent de définir une valeur une seule fois et de la réutiliser partout. Quand vous changez la variable, TOUT le site se met à jour :
Déclarez dans :root { } les variables avec -- devant le nom. Utilisez-les avec var(--nom-variable). Exemple : --color-primary: #00d4ff; puis color: var(--color-primary);
C'est la base du mode sombre (chapitre 14) — on change les variables, tout le site bascule.