Quand on commence à apprendre le développement web, la première étape passe généralement par l'HTML : un langage qui permet de structurer le contenu d'une page. Le problème, c'est qu'une page HTML brute est particulièrement austère. Pour lui donner vie et lui apporter un vrai design, on va devoir utiliser le CSS. CSS signifie Cascading Style Sheet (feuille de style en cascade). C'est le langage qui s'occupe de la mise en forme : couleurs, typographie, espacements, disposition des éléments... tout ce qui touche à l'apparence d'une page passe par lui.
Contrairement à ce qu'on pourrait craindre, sa syntaxe n'est pas difficile à prendre en main. En revanche, CSS embarque plus d'une centaine de propriétés qui interagissent entre elles, et c'est là que réside la vraie complexité.
La syntaxe CSS
Une règle CSS se compose toujours des mêmes éléments :
h1 {
color: white;
background: black;
}- Le sélecteur (
h1) cible les éléments HTML auxquels on veut appliquer le style. - Les accolades délimitent le bloc de déclarations.
- À l'intérieur, on liste des paires
propriété: valeur;. Ici,colorchange la couleur du texte etbackgroundcelle du fond.
Un fichier CSS n'est rien d'autre qu'un enchaînement de règles, chacune décrivant comment styliser une partie de la page.
Où placer le CSS ?
Il existe trois façons d'intégrer du CSS dans une page HTML, chacune avec ses cas d'usage.
L'attribut style (en ligne)
La première consiste à appliquer le style directement sur un élément via l'attribut style :
<h1 style="color: white; background: black;">Mon titre</h1>C'est utile pour un test rapide, mais l'approche montre vite ses limites : le style ne s'applique qu'à cet élément précis et n'est pas réutilisable ailleurs.
La balise <style>
On peut aussi regrouper ses règles dans une balise <style> placée dans le <head> du document :
<head>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>C'est déjà plus propre, mais les styles restent cloisonnés à cette seule page.
Le fichier CSS externe (approche recommandée)
C'est la méthode que l'on utilisera dans cette formation. On crée un fichier .css séparé — style.css par exemple — dans lequel on centralise toutes les règles :
h1 {
color: white;
background: black;
}On le relie ensuite à la page HTML avec la balise <link> dans le <head> :
<head>
<link rel="stylesheet" href="style.css">
</head>L'attribut rel="stylesheet" indique la nature du fichier lié, et href pointe vers son emplacement. L'avantage de cette approche est évident : un seul fichier CSS peut couvrir toutes les pages du site, ce qui évite de dupliquer les règles et facilite la maintenance.
Maintenant que les bases sont posées, on peut passer au premier chapitre et s'attarder sur les sélecteurs — la mécanique centrale du CSS pour cibler précisément les éléments que l'on souhaite styliser.
