Polices et classes · Code avec Martin

Choisis une belle police pour ton site web, et découvre les classes – l'astuce la plus utile de tout le CSS.

Montre-moi : une plus jolie police

La police par défaut du navigateur est ennuyeuse. Remplaçons-la avec une règle pour toute la page :

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family est une liste de souhaits : « Utilise Verdana. Tu ne l’as pas ? Alors Arial. Pas ça non plus ? Alors n’importe quelle police sans empattement (sans-serif). »

Les polices que presque tous les ordinateurs ont : Verdana, Georgia (a des petits pieds, bon pour les textes longs), Trebuchet MS, Courier New (ressemble à une machine à écrire). Essaie-en plusieurs – changer la police fait des merveilles sur un site web.

Montre-moi : les classes

Jusqu’ici tu peux styliser tous les paragraphes d’un coup. Mais si un paragraphe doit avoir l’air différent – comme un avis important ? C’est pour ça qu’il y a les classes :

En HTML, donne une classe à une balise :

<p class="notice">No school tomorrow!</p>

Et en CSS, cible-la avec un point :

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – la couleur de fond de cet élément seulement
border – un cadre : épaisseur, style, couleur
padding – espace entre le texte et le cadre (pour que le texte ne soit pas collé au bord)
border-radius – coins arrondis

Tu peux mettre une classe sur autant d’éléments que tu veux – ils s’habilleront tous pareil. C’est comme un uniforme scolaire, mais pour les balises.

À toi 💪

Définis une police pour tout ton site web avec font-family sur body.
Invente au moins une classe qui correspond à ton projet, et utilise-la à deux endroits.

🏫 Site web d'école – solution (une classe « news »)

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 Site web personnel – solution (une classe « favorite »)

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 Journal de voyage – solution (une classe « tip »)

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ Site web de club – solution (une classe « win »)

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

Les victoires sont mises en évidence en vert tout de suite – comme dans un vrai tableau de classement !

✅

Vérifie : Ton site web a une nouvelle police, et au moins un élément avec sa propre classe qui a l’air différent du reste.

Ce que tu retiens de cette leçon

font-family sur body change la police pour tout le site web.
Une classe est une étiquette : en HTML class="name", en CSS .name { ... }.
padding, border et border-radius transforment un paragraphe simple en un joli badge coloré.