Apprends le CSS !

?

C'est quoi le CSS ?

Si le HTML est le squelette de ta page (la structure), le CSS (Cascading Style Sheets) en est l'habit : il définit les couleurs, les tailles, les polices, les espacements... Tout ce qui rend ta page belle !

Sans CSS, toutes les pages seraient du texte noir sur fond blanc. Avec CSS, tu peux tout personnaliser !

Sans CSS

Mon titre

Un paragraphe de texte tout simple.

Un lien

Avec CSS

Mon titre

Un paragraphe de texte tout simple.

Un lien

L

Comment lier le CSS à ma page HTML ?

Il y a trois façons d'ajouter du CSS. La meilleure pour commencer : créer un fichier style.css séparé et le lier dans le <head> de ton HTML.

<!-- Dans ton fichier HTML, dans le <head> : -->
<link rel="stylesheet" href="style.css">

fichier .html La structure de ta page

fichier .css Le style de ta page

💡Tu peux aussi écrire le CSS directement dans le HTML avec la balise <style> dans le <head>. C'est pratique pour les petits projets !

S

La syntaxe CSS : sélecteur + propriétés

Une règle CSS se compose toujours de la même façon : d'abord le sélecteur (qui cibler ?), puis entre accolades les propriétés (quoi changer ?) et leur valeur (comment ?).

h1 {                    ← sélecteur : on cible tous les <h1>
  color: red;          ← propriété : valeur ;
  font-size: 32px;
}

p {
  color: #5F5E5A;
  line-height: 1.6;
}

⚠N'oublie jamais le point-virgule ; à la fin de chaque déclaration, et les accolades { } autour des propriétés. Ce sont les erreurs les plus courantes !

S

Les sélecteurs : qui cibler ?

Le sélecteur décide quels éléments HTML vont recevoir le style. Il en existe plusieurs types :

Sélecteur	Cible	Exemple
`balise`	Tous les éléments de ce type	`p { color: blue; }`
`.classe`	Les éléments avec cette classe	`.titre { font-size: 24px; }`
`#identifiant`	L'élément avec cet id (unique)	`#menu { background: black; }`
`*`	Tous les éléments de la page	`* { margin: 0; }`

<!-- Dans le HTML -->
<p class="important">Ce texte est important.</p>
<p>Ce texte est normal.</p>

/* Dans le CSS */
.important {
  color: red;
  font-weight: bold;
}

💡La classe (avec un .) est la plus utilisée : on peut l'appliquer à plusieurs éléments. L'identifiant (avec #) doit être unique sur toute la page.

C

Les couleurs

En CSS, les couleurs peuvent s'écrire de plusieurs façons. Les plus courantes sont le nom en anglais, le code hexadécimal (# suivi de 6 chiffres/lettres) et le format rgb().

h1 {
  color: red;            ← nom anglais
  color: #E24B4A;       ← code hexadécimal
  color: rgb(226,75,74); ← rouge, vert, bleu
}

body {
  background-color: #F1EFE8; ← fond de la page
}

#E24B4A

#185FA5

#1D9E75

#BA7517

#7F77DD

#2C2C2A

#F1EFE8

💡Sur internet, cherche "color picker" pour trouver le code hexadécimal de n'importe quelle couleur en cliquant dessus !

T

Le texte et les polices

CSS donne un grand contrôle sur l'apparence du texte : famille de police, taille, graisse, alignement, espacement...

h1 {
  font-family: Georgia, serif;  ← police
  font-size: 2rem;          ← taille
  font-weight: bold;        ← gras
  color: #D85A30;          ← couleur
}

p {
  font-size: 1rem;
  line-height: 1.6;        ← hauteur de ligne
  text-align: center;     ← center / left / right
  text-decoration: underline;
}

Résultat dans le navigateur

Mon super titre !

Un paragraphe avec du texte bleu et bien espacé.

💡rem et px sont des unités de taille. 1rem = taille de base du navigateur (généralement 16px). Préfère rem pour que ta page s'adapte à tous les écrans !

D

Dimensions et fond

On peut contrôler la taille d'un élément et sa couleur de fond avec ces propriétés :

.boite {
  width: 200px;            ← largeur
  height: 100px;           ← hauteur
  background-color: #B5D4F4;
  border-radius: 12px;    ← coins arrondis
}

Résultat dans le navigateur

Une boîte bleue

💡border-radius: 50% transforme n'importe quelle boîte en cercle parfait ! Essaie sur une boîte carrée.

B

Les bordures

La propriété border ajoute un contour autour d'un élément. Elle prend trois valeurs : l'épaisseur, le style et la couleur.

.cadre {
  border: 3px solid #D85A30;  ← épaisseur style couleur
  border-radius: 0px;
}

/* Styles possibles : solid | dashed | dotted */
.tirets { border: 2px dashed #1D9E75; }
.pointilles { border: 2px dotted #7F77DD; }

Résultat dans le navigateur

solid

dashed

dotted

M

Le modèle de boîte : margin et padding

Chaque élément HTML est une boîte. Autour de son contenu, il y a deux espaces essentiels à connaître :

padding Espace à l'intérieur de la boîte (entre le contenu et la bordure)

margin Espace à l'extérieur de la boîte (entre la boîte et les voisins)

margin (espace extérieur)

border (bordure)

padding (espace intérieur)

contenu

.bouton {
  padding: 10px 20px;    ← haut/bas  gauche/droite
  margin: 16px;          ← 16px sur les 4 côtés
  margin-top: 8px;      ← un seul côté
}

💡Une astuce classique pour centrer un bloc : margin: 0 auto (haut/bas = 0, gauche/droite = automatique). Ça ne marche que si l'élément a une largeur définie !

D

display : comment les éléments se placent

La propriété display contrôle comment un élément s'affiche et se place par rapport à ses voisins. C'est l'une des propriétés les plus importantes du CSS !

.bloc   { display: block; }   ← prend toute la largeur, passe à la ligne
.inline { display: inline; }  ← reste sur la même ligne
.flex   { display: flex; }    ← aligne les enfants en ligne
.cache  { display: none; }    ← cache l'élément

display: flex — les enfants se placent en ligne

Enfant 1

Enfant 2

Enfant 3

💡display: flex est très puissant pour aligner des éléments. Ajoute gap: 10px pour espacer les enfants, et justify-content: center pour les centrer !

E

Exemple complet : styliser une page

Voici un fichier CSS complet pour une page HTML simple. C'est un bon point de départ !

/* style.css */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #F1EFE8;
  color: #2C2C2A;
  padding: 1rem;
}

header {
  background-color: #2C2C2A;
  color: #FAC775;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
}

h1 {
  font-size: 2rem;
  color: #D85A30;
  margin-bottom: 1rem;
}

p {
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: #888780;
}

✦

Le raccourci magique dans VS Code

Comme pour le HTML, pense à formater ton CSS régulièrement pour qu'il reste lisible. Dans VS Code :

Shift+Alt+F

Formater tout le fichier CSS

Ctrl+/

Commenter / décommenter une ligne

💡Les commentaires CSS s'écrivent entre /* et */. Ils ne s'affichent pas dans le navigateur mais t'aident à te souvenir à quoi sert chaque règle !