Introduction
- CSS (Cascading Style Sheets) est un langage qui définit la présentation des documents HTML.
- Il permet de contrôler l’apparence : couleurs, marges, polices, alignements, espacements, etc.
- Son rôle : séparer le contenu (HTML) de la mise en forme (CSS)
Structure d’une règle CSS
Une feuille de style CSS est constituée de règles :
sélecteur {
propriété: valeur;
}Exemple :
p {
color: #333;
font-size: 1em;
text-align: justify;
}👉 Ici :
p= sélecteur (balise visée),color,font-size,text-align= propriétés,#333,1em,justify= valeurs.
Les trois modes d’intégration de CSS
| Méthode | Exemple | Usage recommandé |
|---|---|---|
| Interne | Dans le <head> : <style>p { color: red; }</style> | Pour tests ou pages isolées |
| Externe | Dans un fichier .css : <link rel="stylesheet" href="style.css" /> | ✅ Bonne pratique, fichiers structurés |
| En ligne | Dans une balise HTML : <p style="color:red;"> | ⚠️ À éviter (non maintenable) |
Les sélecteurs
Les sélecteurs définissent à quelles balises ou éléments les styles s’appliquent.
| Type | Exemple | Description |
|---|---|---|
| Balise | p {} | Tous les paragraphes |
| Classe | .intro {} | Éléments avec class="intro" |
| Identifiant | #chapitre1 {} | Élément unique avec id="chapitre1" |
| Hiérarchique | article p {} | Les <p> à l’intérieur de <article> |
| Multiple | h1, h2, h3 {} | Plusieurs sélecteurs en même temps |
Quelques propriétés courantes
| Catégorie | Exemples de propriétés | Exemple d’usage |
|---|---|---|
| Texte | font-family, font-size, line-height, color, text-align | p { text-align: justify; } |
| Mise en page | margin, padding, width, height | body { margin: 0 5%; } |
| Couleurs et fonds | background-color, background-image | body { background-color: #fff; } |
| Bordures | border, border-radius | img { border-radius: 10px; } |
| Listes | list-style-type, list-style-position | ul { list-style-type: square; } |
Unités et valeurs
- Relatives :
em,%,rem→ s’adaptent à la taille du texte ou de l’écran. - Absolues :
px,cm,pt→ fixes, à éviter - Couleurs : mots-clés (
red), hexadécimal (#cc0000), RGB (rgb(204,0,0)).
👉 privilégier les unités relatives (em, %) pour l’adaptation aux écrans.
Exemple complet
HTML :
<p class="intro">Bienvenue dans ce livre numérique.</p>CSS :
.intro {
font-family: serif;
font-size: 1.2em;
text-align: justify;
color: #333;
}Héritage et cascade
Héritage : les propriétés s’appliquent aux éléments enfants (ex. font-family)
Exemple :
body {
font-family: "Times New Roman", serif;
color: #333;
}
p {
text-align: justify;
}<body>
<p>Le texte de ce paragraphe hérite de la couleur et de la police définies pour le corps du document.</p>
</body>👉 Ici, les paragraphes héritent de font-family et color définis pour <body>.
La cascade désigne la manière dont le navigateur décide quelle règle appliquer quand plusieurs concernent le même élément.
Plus la règle est spécifique ou récente, plus elle l’emporte.
Exemple :
p {
color: black;
}
section p {
color: blue;
}<section>
<p>Ce texte sera bleu car la règle <code>section p</code> est plus spécifique que <code>p</code>.</p>
</section>👉 Les deux règles s’appliquent au paragraphe, mais la seconde, plus précise (article p), prend le dessus.
Bonnes pratiques
- Ne pas mélanger HTML et CSS dans un même fichier
- Écrire des règles simples et cohérentes pour éviter les conflits
- Valider sa feuille avec le validateur CSS W3C.
Exercices pratiques
- Observation : ouvrir une feuille CSS et identifier les sélecteurs et propriétés.
- Application : modifier la couleur et la taille du texte d’un paragraphe.
- Création : écrire une feuille CSS pour un chapitre :
- Titre centré (
h1), - Paragraphes justifiés,
- Images centrées et adaptables.
- Titre centré (
- Validation : tester dans le navigateur.
Points-clés à retenir
- CSS = mise en forme, HTML = structure.
- Séparer contenu et présentation pour un code propre et réutilisable.
- Utiliser des unités relatives pour adapter la présentation aux écrans.