Bonjour, belle personne, bienvenue sur notre podium de code 😎💻
Aujourd’hui, nous jetons un coup d’œil à la star du monde HTML qui incarne la philosophie « commencer simple, finir légendaire » : la balise <style>.
Ce n’est pas juste un article du genre « écris deux lignes de CSS et passe à autre chose »
👉 Plein d’exemples
👉 Pratique pour un usage réel
👉 Comprend les erreurs courantes, astuces et petits secrets
👉 Vous fera dire « ohhh ça a du sens en fait »
Prenez votre café ☕, mettez vos accessoires CSS 🎀, c’est parti !
🎀 Qu’est-ce que la balise <style> ? (Qu’est-ce que c’est, pourquoi existe-t-elle ?)
HTML nous donne le squelette.
Le CSS ajoute à ce squelette :
- couleur 💖
- style 😎
- personnalité 💃
- charisme ✨
Et c’est exactement ce que fait la balise <style> — c’est l’espace à l’intérieur d’un fichier HTML où nous écrivons du CSS.
<style>
h1 {
color: hotpink;
}
</style>
Ce code dit en gros :
« Hé navigateur ! Mets tous les éléments
h1en rose, parce que je l’ai dit. » 💅
📌 Info technique, mais simple :
<style>contient du CSS- Il se trouve à l’intérieur du fichier HTML
- Lu par le navigateur au chargement de la page
🧠 Où doit-on écrire la balise <style> ? (Très important !)
Bonne réponse : dans la balise <head> 👑
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fdf2f8;
}
</style>
</head>
<body>
<h1>Bonjour le monde</h1>
</body>
</html>
🎯 Pourquoi <head> ?
- Le navigateur connaît les styles dès le départ
- Pas de saut de page pendant le chargement
- Plus professionnel (c’est votre CV de code 😌)
🚫 L’écrire au hasard dans le <body> :
- Gâche votre code
- Fait pleurer tout développeur qui le lit
- Fâche votre Future You 😤
💅 Écrire du CSS avec la balise <style> (Mini leçon de CSS)
Le CSS fonctionne avec cette formule :
sélecteur {
propriété: valeur;
}
Exemple :
<style>
p {
color: #333;
font-size: 18px;
line-height: 1.6;
}
</style>
📌 Voici ce qui se passe :
p→ sélecteur (qui stylons-nous ?)color,font-size→ propriétés#333,18px→ valeurs
CSS, c’est en gros :
« Qui, quoi et comment dois-je styliser ? » 🤓
🎨 Exemple concret : styliser une petite page de blog
<style>
body {
font-family: Arial, sans-serif;
background-color: #fafafa;
margin: 0;
padding: 20px;
}
h1 {
color: #ff4d6d;
text-align: center;
}
p {
max-width: 600px;
margin: 20px auto;
}
</style>
✨ Que fait ce CSS ?
- Donne de l’air à la page
- Centre le texte
- Améliore la lisibilité
Voilà le CSS en action : « petit geste, grand impact » 😍
⚠️ CSS en ligne vs. balise <style> (Tableau comparatif)
<p style="color:red; font-size:20px;">Bonjour</p>
🚨 CSS en ligne :
- Rapide ❌
- Difficile à contrôler ❌
- Entretien compliqué ❌
<style>
p { color: red; }
</style>
✅ Balise <style> :
- Plus propre
- Tout gérer depuis un seul endroit
- Facile à lire et à comprendre
En résumé :
CSS en ligne = urgence
<style>= solution intelligente 😌
🧩 Limites de la balise <style> (Parlons réalité)
<style> est géniale mais pas tout.
❌ Dans les grands projets :
- Le code devient volumineux
- Les fichiers s’encombrent
- La gestion devient plus difficile
✅ Dans le monde professionnel :
<link rel="stylesheet" href="style.css">
Mais pour l’apprentissage :
<style>= LÉGENDAIRE 🏆
💡 Astuces en or
✨ Ne réécrivez pas la même couleur 10 fois → apprenez les variables CSS
✨ Utilisez les class, ne mettez pas tout le monde dans le même panier
✨ Faites d’abord un brouillon avec <style>, puis passez à un fichier CSS
✨ Décorez votre code avec des commentaires
/* Styles des titres */
h1 {
color: #ff4d6d;
}
💖 En résumé
- La balise
<style>est l’espace CSS à l’intérieur de votre HTML - Parfait pour les petits et moyens projets
- Meilleur point de départ pour apprendre
- Détermine l’âme de votre page web ✨
