📚 Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets) est le langage utilisé pour styliser et mettre en page
les documents HTML. Si le HTML est le squelette, le CSS est la peau et les vêtements de votre site
web.
Rôle du CSS : couleurs, polices, espacements, positionnement, animations, et bien
plus encore !
1. CSS Inline
Priorité: Haute
Directement dans l'attribut style de la balise HTML.
<p style="color: red;">
Texte en rouge
</p>
❌ Inconvénient : Difficile à maintenir, code répétitif
✅ Usage : Styles ponctuels, tests rapides
2. CSS Interne
Priorité: Moyenne
Dans une balise <style> dans le <head>.
<head>
<style>
p {
color: blue;
}
</style>
</head>
✅ Avantage : Styles spécifiques à une page
❌ Inconvénient : Non réutilisable sur d'autres pages
3. CSS Externe
Priorité: Basse (mais recommandé !)
Fichier .css séparé, lié avec <link>.
<head>
<link
rel="stylesheet"
href="style.css"
/>
</head>
✅ Avantages : Réutilisable, organisé, meilleure performance
⭐ Recommandation : Méthode à privilégier !
Structure d'une règle CSS
sélecteur {
propriété: valeur;
propriété: valeur;
}
Sélecteur : élément HTML ciblé
Propriété : aspect à modifier (color, font-size, etc.)
Valeur : la valeur de la propriété
Point-virgule : sépare chaque déclaration
p {
color: blue;
font-size: 16px;
text-align: center;
}
Sélecteur d'élément
Cible tous les éléments d'un type donné.
p {
color: purple;
}
h1 {
font-size: 32px;
}
Tous les <p> seront affectés
Chaque paragraphe aura ce style
Sélecteur de classe
Cible les éléments avec une classe spécifique. Préfixe : point (.)
.ma-classe {
background: yellow;
}
<p
class="ma-classe">...</p>
Élément avec classe="selecteur-classe"
Réutilisable sur plusieurs éléments
💡 Conseil : Le plus utilisé ! Réutilisable et flexible
Sélecteur d'ID
Cible un élément unique avec un ID. Préfixe : dièse (#)
#mon-id {
border: 2px solid red;
}
<div
id="mon-id">...</div>
Élément avec id="selecteur-id"
⚠️ Important : Un ID doit être unique dans la page !
Nom de couleur
140 couleurs prédéfinies en CSS.
color: tomato;
background: tomato;
Exemples : red, blue, green, tomato, coral, crimson...
Hexadécimal (HEX)
Format #RRGGBB (Rouge Vert Bleu).
color: #3498db;
background: #3498db;
💡 Astuce : Utiliser un color picker pour trouver le code
RGB
Rouge, Vert, Bleu (valeurs 0-255).
color: rgb(52, 152, 219);
background: rgb(52, 152, 219);
Équivalent : rgb(52, 152, 219) = #3498db
RGBA
RGB + Alpha (transparence 0-1).
color: rgba(52, 152, 219, 0.5);
background: rgba(52, 152, 219, 0.5);
Alpha : 0 = transparent, 1 = opaque, 0.5 = 50% transparent
font-family
Définit la police de caractères.
font-family: Arial, sans-serif;
font-family: 'Times New Roman', serif;
font-family: 'Courier New', monospace;
Arial (sans-serif)
Times New Roman (serif)
Courier New (monospace)
💡 Conseil : Toujours prévoir une police de secours
font-size
Taille de la police.
font-size: 16px; /* Pixels */
font-size: 1.5em; /* Relatif au parent */
font-size: 1.2rem; /* Relatif à la racine */
14px - Petit
18px - Moyen
24px - Grand
font-weight
Épaisseur de la police.
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 600; /* Semi-bold */
300 - Light
400 - Normal
700 - Bold
900 - Black
text-align
Alignement du texte.
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
Aligné à gauche
Centré
Aligné à droite
Justifié - Le texte est aligné à la fois à gauche et à droite.
