Les bases du CSS expliquées simplement

Le CSS transforme tes pages HTML brutes en vraies interfaces — et ses fondations tiennent en une poignée de concepts qui, une fois compris, débloquent tout le reste. Ce guide des bases du CSS les parcourt dans l’ordre d’apprentissage, en pratique directe. C’est le compagnon de la première étape de notre guide complet pour apprendre le CSS.

Brancher le CSS et cibler les éléments : les sélecteurs

Première étape : relier le style à la structure. Crée un fichier style.css à côté de ton index.html dans VS Code, et référence-le dans le head du HTML avec une balise link. À partir de là, chaque règle CSS suit la même anatomie : un sélecteur (qui je cible), puis entre accolades des paires propriété: valeur; (ce que je change). Écris ta première règle — passe tous les h1 en bleu — recharge, observe : la boucle d’apprentissage du CSS est lancée, et elle est instantanée.

Trois sélecteurs couvrent l’essentiel du quotidien. Le sélecteur de balise cible tous les éléments d’un type (p, h2, img) : parfait pour les styles généraux. La classe, précédée d’un point dans le CSS et posée via l’attribut class dans le HTML, est l’outil roi : réutilisable sur autant d’éléments que tu veux (.carte, .bouton, .important). L’identifiant, précédé d’un dièse, cible un élément unique — à réserver aux cas vraiment uniques. Retiens la hiérarchie de spécificité : l’identifiant l’emporte sur la classe, qui l’emporte sur la balise — c’est la règle d’arbitrage quand deux styles se contredisent, et la source de la moitié des mystères du CSS débutant. Ces notions rejoignent le vocabulaire général de la programmation : autant les nommer correctement dès le départ.

Habiller le contenu : couleurs, texte, et le fameux box model

Les premières propriétés donnent des résultats immédiats. Côté couleurs : color pour le texte, background-color pour le fond, avec des valeurs nommées (blue), hexadécimales (#2c6fbb) ou rgb. Côté texte : font-size pour la taille (en pixels d’abord, en unités relatives plus tard), font-family pour la police, font-weight pour la graisse, text-align pour l’alignement, line-height pour l’aération. Avec ces six propriétés et tes sélecteurs, tes pages changent déjà de visage.

Vient alors LE concept central du CSS : le box model. Chaque élément de la page — titre, paragraphe, image, bloc — est une boîte composée de quatre couches concentriques : le contenu au centre, le padding (l’espace intérieur entre contenu et bordure), la border (la bordure elle-même), et la margin (l’espace extérieur qui repousse les voisins). Confondre padding et margin est l’erreur numéro un du débutant ; l’inspecteur des DevTools (clic droit → Inspecter) l’affiche en couleurs pour chaque élément — passes-y dix minutes, le brouillard se lève définitivement. Ajoute border-radius pour arrondir et box-shadow pour l’ombre : te voilà capable de fabriquer de vraies cartes, comme dans nos 10 exercices de CSS.

Mettre en page : display, flexbox et le premier responsive

Dernier palier du socle : organiser les boîtes entre elles. La propriété display définit le comportement de chaque élément — block (toute la largeur, à la ligne), inline (dans le flux du texte), et surtout flex, qui active le mode de mise en page moderne. Flexbox transforme un conteneur en chef d’orchestre de ses enfants : justify-content les distribue horizontalement, align-items les aligne verticalement, gap les espace. Centrer une boîte — le casse-tête historique du CSS — devient trois lignes. Barres de navigation, rangées de cartes, en-têtes : flexbox est ton outil quotidien, et il suffit pour tes premières mises en page complètes sur ton premier site.

Reste l’adaptation aux écrans : les media queries. Une règle @media (max-width: 768px) applique des styles spécifiques sous une largeur donnée — typiquement passer une rangée de cartes en colonne sur mobile. C’est la porte d’entrée du responsive, approfondie dans rendre un site responsive. Ton socle CSS est complet : huit briques, toutes actionnables aujourd’hui. La suite est une affaire de pratique — les sites d’exercices et la reproduction de designs feront le reste, jusqu’aux projets interactifs où ton CSS rencontrera le JavaScript.

Trois habitudes d’organisation, à prendre pendant que ton CSS est encore petit, t’épargneront le chaos quand il grandira. Les commentaires, d’abord : CSS a sa propre syntaxe de commentaire (barre oblique-étoile) — utilise-la pour découper ton fichier en sections nommées (« général », « en-tête », « cartes ») ; un fichier de 300 lignes sans repères est illisible, le même fichier sectionné se navigue en secondes. L’ordre, ensuite : garde une logique constante — les styles généraux (body, titres) en haut, puis les composants dans l’ordre de la page, les media queries à la fin. Peu importe la convention exacte : c’est la constance qui compte. Le nommage des classes, enfin, le plus important : nomme le rôle, jamais l’apparence. Une classe .bouton-principal survivra à tous tes changements de charte ; une classe .bouton-bleu devient un mensonge le jour où le bouton passe au vert — et ce jour arrive toujours. Ces trois réflexes semblent cosmétiques ; ils sont exactement ce qui sépare un CSS de débutant d’un CSS qu’on peut faire évoluer sans peur.

Questions fréquentes

Quelles sont les notions de base à apprendre en CSS ?

Dans l’ordre : relier la feuille de style au HTML, les trois sélecteurs (balise, classe, identifiant), les propriétés de couleur et de texte, le box model (contenu, padding, border, margin), display et flexbox pour la mise en page, puis une première media query pour le mobile.

Quelle différence entre padding et margin ?

Le padding est l’espace intérieur d’une boîte, entre son contenu et sa bordure (il agrandit la boîte) ; la margin est l’espace extérieur, entre la boîte et ses voisines (elle les repousse). L’inspecteur des DevTools les affiche en couleurs distinctes pour chaque élément.

Vaut-il mieux utiliser des classes ou des identifiants ?

Des classes, dans l’immense majorité des cas : réutilisables, combinables et de spécificité raisonnable, elles sont l’outil standard du stylage. L’identifiant, unique par page et très prioritaire dans la cascade, se réserve aux éléments réellement uniques comme des ancres de navigation.

Comment s’entraîner efficacement en CSS ?

En stylant de vraies pages : reprends tes exercices HTML et habille-les progressivement, inspecte les sites que tu admires avec les DevTools, et reproduis des composants existants (cartes, boutons, barres de navigation). Dix minutes d’inspecteur par jour accélèrent énormément la compréhension.

Sources

• MDN Web Docs — tutoriels et référence CSS en français
• freeCodeCamp — parcours CSS pratique et gratuit

Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.