Phase 2 — Les fondamentaux CSS
#5 Introduction au CSS
sélecteurs, propriétés, cascade
Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets) contrôle l'apparence visuelle des éléments HTML. Il définit les couleurs, polices, espacements, la mise en page et bien plus — en séparant la présentation de la structure.
Trois façons d'ajouter du CSS
1. Feuille de style externe (recommandé)
<!-- Dans votre <head> HTML -->
<link rel="stylesheet" href="style.css">2. Feuille de style interne
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
</style>3. Styles en ligne (à éviter)
<p style="color: blue; font-size: 18px;">Texte stylé</p>Les sélecteurs
Sélecteurs courants
/* Sélecteur d'élément */
p { color: #333; }
/* Sélecteur de classe */
.card { border: 1px solid #ddd; padding: 16px; }
/* Sélecteur d'ID */
#hero { background: linear-gradient(to right, #3b82f6, #8b5cf6); }
/* Sélecteur descendant */
nav a { text-decoration: none; }
/* Sélecteur d'attribut */
input[type="email"] { border-color: blue; }
/* Regroupement */
h1, h2, h3 { font-weight: bold; }Propriétés et valeurs
Structure d'une règle CSS
selecteur {
propriete: valeur;
propriete: valeur;
}
/* Exemple */
.button {
background-color: #3b82f6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}La spécificité
Quand plusieurs règles ciblent le même élément, la spécificité détermine laquelle gagne : styles en ligne > IDs > classes > éléments.
À vous de jouer
Essayez les commandes CSS ci-dessous :
terminal — browser