Le CSS décide à quoi ressemble ta page : couleurs, typo, espacements. Mais le vrai sujet, c'est de placer les éléments où tu veux. À la fin de ce tuto, ta page « Qui suis-je » de l'étape 1 aura enfin de l'allure.
Durée 1 à 2 semainesNiveau t'as fini l'étape 1Projet ta page « Qui suis-je », en propreMis à jour
À la fin, tu sauras
Relier une feuille de style et écrire des règles CSS
Viser n'importe quel élément avec les sélecteurs
Choisir des couleurs et une police, et les appliquer partout
Maîtriser le box model : margin, padding, border
Placer tes éléments avec flexbox et grid, et les ajuster en direct dans les DevTools
Les missions
Repars de ta page de l'étape 1, dans le même dossier mon-site. Tape le CSS au lieu de le copier, et regarde ce qui change après chaque règle.
Mission 0
Le HTML dit ce qu'il y a sur la page, le CSS dit à quoi ça ressemble. Crée style.css à côté de index.html, puis relie-le dans le <head> :
/* Ma première règle : un fond jaune pour vérifier que ça marche */
body {
background-color: lightyellow;
}
body : le sélecteur, à qui la règle s'applique.
background-color : la propriété. lightyellow : la valeur.
Les accolades entourent la règle, chaque ligne finit par un ;.
/* ... */ : un commentaire, ignoré par le navigateur.
Erreur fréquente
Rien ne change ? Vérifie que le href correspond au nom du fichier (style.css, pas styles.css) et que t'as sauvegardé les deux fichiers.
Résultat attendu
index.html
Le fond devient jaune pâle. Le reste garde le style par défaut du navigateur.
Mission 1
Pour styler un élément, il faut le viser : par balise, par classe ou par id. Ajoute une classe et un id dans ton HTML :
index.html
<h1 id="nom">Salut, moi c'est Alex</h1>
<p class="intro">J'apprends à coder des sites, <strong>en partant de zéro</strong>.</p>
Puis remplace le fond jaune par ces règles :
style.css
/* Par balise : TOUS les h2 de la page */
h2 {
color: darkslateblue;
}
/* Par classe : tous les éléments qui ont class="intro" */
.intro {
font-size: 20px;
}
/* Par id : l'élément unique qui a id="nom" */
#nom {
text-transform: uppercase;
}
/* Descendant : les liens qui sont DANS le nav */
nav a {
color: darkslateblue;
}
.intro : le point veut dire « classe ». Réutilisable autant que tu veux.
#nom : le dièse veut dire « id ». Unique dans la page.
nav a : l'espace veut dire « à l'intérieur de ».
Deux règles sur le même élément ? La plus précise gagne (id, puis classe, puis balise). À égalité, la dernière écrite. C'est la cascade.
Erreur fréquente
Écrire intro { } au lieu de .intro { }. Sans le point, le navigateur cherche une balise <intro>. Dans le HTML par contre, pas de point : class="intro".
Résultat attendu
index.html
Ton nom en MAJUSCULES, l'intro plus grosse, les h2 et les liens du menu en bleu-violet. Le fond jaune a disparu, c'est normal.
Mission 2
Deux ou trois couleurs et une bonne police, ça suffit. Sur Google Fonts, choisis une police (ici Poppins), clique sur « Get font » puis « Get embed code », et colle les balises avant ton style.css :
/* Mes couleurs, définies une seule fois */
:root {
--fond: #fdfaf5;
--texte: #222222;
--accent: #e85d3f;
}
body {
background-color: var(--fond);
color: var(--texte);
font-family: "Poppins", system-ui, sans-serif;
line-height: 1.6;
}
h1,
h2 {
color: var(--accent);
}
a {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
--accent dans :root : une variable. Tu l'utilises partout avec var(--accent), et tu la changes en une ligne.
font-family : ta police, puis des polices de secours si elle ne charge pas.
h1, h2 : la virgule applique la règle à plusieurs sélecteurs.
a:hover : le style du lien quand la souris passe dessus.
Erreur fréquente
Du texte clair sur fond clair. Si tu plisses les yeux pour lire, tes visiteurs aussi.
Résultat attendu
index.html
Fond crème, texte en Poppins, titres en orange. Les liens du menu restent bleu-violet : nav a est plus précis que a.
Mission 3
Chaque élément est une boîte : le contenu, puis le padding (espace intérieur), la border, et la margin (espace extérieur).
style.css
/* Tout en haut du fichier : la taille inclut padding et bordure */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Le contenu ne s'étale pas sur tout l'écran, et il est centré */
main {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
section {
margin-bottom: 40px;
padding: 24px;
border: 1px solid #e5ded3;
border-radius: 12px;
background-color: white;
}
box-sizing: border-box : une boîte de width: 300px fait vraiment 300px, padding compris.
max-width + margin: 0 auto : 800px maximum, et centrée.
padding: 0 20px : haut et bas, puis gauche et droite.
border : épaisseur, style, couleur. border-radius arrondit les coins.
À toi
Mets ta photo en rond : une classe photo, width et height à 160px, border-radius: 50% et object-fit: cover.
Résultat attendu
index.html
Plus de marge autour de la page, chaque section est une carte blanche centrée, et ta photo est ronde. Le menu est encore une liste à puces.
Mission 4
Par défaut, les blocs s'empilent. Flexbox aligne des éléments sur une ligne (ou une colonne) et gère l'espace entre eux.
Une barre sombre en haut : ton nom à gauche, le menu en ligne à droite. Au survol, un lien devient orange.
Mission 5
Flexbox sert partout. Mets la photo à côté du texte en les regroupant dans une div :
index.html
<section id="apropos">
<h2>À propos</h2>
<div class="apropos-contenu">
<img class="photo" src="images/moi.jpg" alt="Alex, souriant, devant un vélo">
<p class="intro">J'apprends à coder des sites, en partant de zéro.</p>
</div>
</section>
flex-direction: column : l'axe principal devient vertical.
font: inherit : les champs reprennent ta police.
align-self: flex-start : le bouton garde sa taille au lieu de s'étirer.
À toi
Mets la classe centre et un padding: 24px sur ton <footer>. Puis attaque Flexbox Zombies (en anglais).
Résultat attendu
index.html
La photo à gauche du texte, les labels au-dessus des champs, le bouton orange à sa taille, le pied de page centré. (Menu masqué dans l'aperçu.)
Mission 6
Flexbox range sur une dimension, grid sur deux : lignes et colonnes. Transforme « Ce que j'aime » en cartes :
index.html
<section id="aime">
<h2>Ce que j'aime</h2>
<div class="cartes">
<article class="carte">
<h3>Le vélo</h3>
<p>Tous les dimanches, quelle que soit la météo.</p>
</article>
<article class="carte">
<h3>Les jeux vidéo</h3>
<p>Surtout ceux où on construit des trucs.</p>
</article>
<article class="carte">
<h3>Le café</h3>
<p>Beaucoup trop, je sais.</p>
</article>
</div>
</section>
La règle de ton <header> dans le panneau Styles. Après un rechargement, tes réglages disparaissent : rien n'est enregistré.
Le projet
Ta page « Qui suis-je », en propre
Repars d'un style.css vide et réécris tout sans regarder les exemples. Tes couleurs, ta police, tes cartes : c'est ta page, pas celle d'Alex. Pas besoin qu'elle soit parfaite sur téléphone, ce sera l'étape 3.
Ton projet est validé quand :
Bonus
Ajoute un effet au survol des cartes : une ombre avec box-shadow et une transition douce avec transition. Cherche ces deux propriétés sur MDN avant de les utiliser.
