Introduction au CSS¶
Le CSS (Cascading Style Sheets, ou feuilles de style en cascade) est un langage qui permet de définir l'apparence visuelle d'une page web. Alors que le HTML s'occupe de la structure et du contenu (titres, paragraphes, images, liens...), le CSS s'occupe de la mise en forme : couleurs, tailles, polices, marges, positionnement, etc.
Pourquoi utiliser le CSS ?¶
- Séparer le contenu (HTML) de la présentation (CSS).
- Faciliter la maintenance et la lecture du code.
- Réutiliser les mêmes styles sur plusieurs pages.
- Créer des designs plus flexibles et professionnels.
Bonne pratique 1 : un fichier CSS séparé¶
Au lieu d'écrire le style directement dans les balises HTML, on place le
CSS dans un fichier externe, par exemple style.css.
Dans le fichier HTML, on le relie ainsi dans la section <head> :
<link rel="stylesheet" href="style.css">
Cela permet de garder le code HTML plus clair et d'appliquer les mêmes règles CSS à plusieurs pages.
Bonne pratique 2 : les fichiers CSS dans un sous-dossier¶
On placera les feuilles de style CSS dans un sous-dossier à part du HTML pour structurer le projet web et permettre de retrouver rapidement les éléments du projet lorsqu'on a à y travailler.
Ainsi, la structure du projet est :
Structure d'une règle CSS¶
Une règle CSS est composée de deux parties :
sélecteur {
propriété: valeur;
}
- Sélecteur : indique sur quels éléments appliquer le style.\
- Propriété ou attribut : ce qu'on veut changer (ex. couleur, taille, marge).\
- Valeur : la nouvelle valeur de cette propriété.
Exemple :
p {
color: blue;
font-size: 1rem;
}
Ici, tous les paragraphes <p> auront un texte bleu et une taille de police de texte.
Noter qu'on pourra donner tous les styles qui s'appliquent à tous les paragraphes dans la même règle.