L'habillage : CSS
L'habillage : CSS
Le HTML donne du sens au contenu, mais une page sans CSS est un mur de texte noir sur fond blanc. Le CSS est le langage qui décrit la présentation : couleurs, polices, espacements, disposition.
Le rôle du CSS
Le CSS (Cascading Style Sheets, « feuilles de style en cascade ») répond à une question simple : à quoi ça ressemble ?
- la taille et la police du texte ;
- les couleurs du texte et du fond ;
- les marges et les espacements ;
- la position des blocs sur la page.
Séparer le fond (HTML) de la forme (CSS) permet de changer tout l'habillage d'un site sans toucher au contenu.
Où écrire le CSS
Il y a trois façons de faire, mais une seule est recommandée :
- Dans un fichier externe —
<link rel="stylesheet" href="styles.css">dans le<head>. C'est la méthode propre : une seule feuille pour tout le site. - Dans la page — une balise
<style>dans le<head>. Pratique pour un test, moins pour un vrai site. - En ligne — un attribut
style="color: red"sur une balise. À éviter : impossible à réutiliser et difficile à maintenir.
La syntaxe et les sélecteurs
Une règle CSS s'écrit toujours de la même façon :
.titre {
color: #6750a4;
font-size: 24px;
}
.titreest le sélecteur : il désigne les éléments à modifier ;coloretfont-sizesont des propriétés ;#6750a4et24pxsont des valeurs.
Les sélecteurs les plus courants :
| Sélecteur | Cible |
|---|---|
p |
Toutes les balises <p> |
.titre |
Tous les éléments avec class="titre" |
#entete |
L'élément avec id="entete" (unique) |
nav a |
Tous les liens contenus dans un <nav> |
a:hover |
Un lien survolé par la souris |
Quand plusieurs règles se contredisent, c'est la cascade qui décide : la
règle la plus spécifique l'emporte. On évite !important, qui casse cette
logique.
Le modèle de boîte
Chaque élément est une boîte composée de quatre couches :
- le contenu (texte, image…) ;
- le padding, l'espace intérieur, entre le contenu et la bordure ;
- la border, la bordure elle-même ;
- la margin, l'espace extérieur, entre la boîte et ses voisines.
Avec box-sizing: border-box, la largeur déclarée inclut le padding et la
bordure : c'est plus simple à calculer.
Disposer les éléments
display: block: l'élément prend toute la largeur (un paragraphe) ;display: inline: il se place dans le flux du texte (un lien) ;display: flex: ses enfants s'alignent en rangée ou en colonne ;display: grid: ses enfants se placent dans une grille.
Flexbox et grid sont les outils modernes de mise en page. Ils remplacent avantageusement les anciennes techniques à base de tableaux.
Textes, couleurs et unités
font-familychoisit la police,font-sizesa taille ;colorrègle la couleur du texte,backgroundcelle du fond ;- les unités :
px(pixels),%(pourcentage),rem(taille relative à la police racine).
Un contraste suffisant entre le texte et le fond est indispensable : c'est une règle d'accessibilité, pas une question de goût.
Responsive : s'adapter à l'écran
Un site responsive s'affiche correctement sur un téléphone comme sur un grand écran. Deux outils suffisent :
- la balise
<meta name="viewport" content="width=device-width, initial-scale=1">dans le<head>; - les media queries, qui appliquent des styles sous conditions :
@media (min-width: 700px) {
.carte { display: flex; }
}
Bonnes pratiques
- utiliser des variables CSS (
--primaire) pour les couleurs répétées ; - nommer les classes clairement, en français si le projet est francophone ;
- commenter les règles difficiles avec
/* ... */; - éviter
!importantet les styles en ligne ; - penser d'abord au mobile, puis élargir.
À retenir
- Le CSS décrit la présentation : couleurs, polices, espacements, disposition.
- Une règle s'écrit : sélecteur { propriété: valeur; }.
- Le point cible une classe (.titre) ; le dièse cible un identifiant (#titre), unique dans la page.
- Chaque élément est une boîte : contenu, padding (intérieur), border, margin (extérieur).
- Une media query adapte l'affichage à la taille de l'écran : c'est le responsive.
Lexique
- Sélecteur
- La partie d'une règle CSS qui désigne les éléments à mettre en forme.
- Propriété
- Ce que l'on règle : color, margin, display…
- Classe
- Un nom réutilisable dans l'attribut class, ciblé par un point en CSS.
- Identifiant
- Un nom unique dans la page, ciblé par un dièse en CSS.
- Modèle de boîte
- La structure de tout élément : contenu, padding, bordure, marge.
- Media query
- Une règle qui s'applique seulement sous certaines conditions, comme la largeur de l'écran.
- Responsive
- Un site qui s'adapte aux téléphones, tablettes et ordinateurs.
Quiz de section
6 questions pour vérifier que tout est clair. Tu peux recommencer autant de fois que tu veux : le badge du chapitre s'obtient avec un sans-faute.
Badge du chapitre obtenu !