Méthodes d'intégration du CSS
Il existe trois approches pour appliquer des styles CSS dans une page HTML :
- En ligne : intégration directe via l'attribut
styledans les balises, pratique rarement recommandée. - Interne : insertion des règles CSS dans une balise
<style>à l'intérieur de l'en-tête HTML. - Externe : création d'un fichier CSS séparé, lié à la page HTML à l'aide d'une balise
<link>, méthode privilégiée pour la maintenabilité.
Exemples d'implémentation
Style en ligne
<p style="color: darkgreen; font-size: 18px">Texte stylisé directement dans la balise.</p>
Style interne
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de style interne</title>
<style>
body { background-color: #eef; }
h1 { color: #336; }
</style>
</head>
<body>
<h1>Titre avec style interne</h1>
</body>
</html>
Style externe
Créez un fichier, par exemple theme.css, et liez-le :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation d'un fichier CSS externe</title>
<link rel="stylesheet" href="theme.css">
</head>
<body>
<p>Contenu utilisant des styles depuis theme.css.</p>
</body>
</html>
Propriétés CSS essentielles
| Propriété | Description |
|---|---|
px |
Unité de mesure en pixels. |
em |
Unité relative basée sur la taille de la police parente. |
color |
Couleur du texte (hex, RGB, etc.). |
font-size |
Taille de la police. |
background-color |
Couleur d'arrière-plan. |
width / height |
Largeur et hauteur, typiquement pour les éléments bloc. |
font-family |
Famille de polices. |
font-weight |
Épaisseur de la police. |
line-height |
Hauteur de ligne. |
text-align |
Alignement horizontal du texte. |
margin / padding |
Espacement extérieur et intérieur. |
border |
Bordure autour de l'élément. |
display |
Mode d'affichage (block, inline, flex, etc.). |
Sélecteurs CSS
Les sélecteurs ciblent des éléments HTML pour appliquer des styles :
- Sélecteur de classe :
.nom-classecible les éléments avec cette classe. - Sélecteur d'identifiant :
#idcible un élément unique. - Sélecteur de type :
tagnamecible toutes les balises de ce type. - Sélecteur combiné : intersection comme
div.classe, ou union avec des virgules. - Sélecteur descendant :
.parent descendantcible les descendants imbriqués. - Sélecteur enfant direct :
.parent > enfantcible les enfants immédiats.
Éléments bloc et inline
Les éléments bloc (<div>, <p>, <h1>-<h6>, etc.) occupent toute la largeur disponible et commencent sur une nouvelle ligne. Les éléments inline (<a>, <span>, etc.) s'intègrent dans le flux du texte sans rupture de ligne.
La propriété display permet de modifier ce comportement, par exemple display: inline transforme un bloc en élément inline.
Positionnement CSS
La propriété position contrôle la disposition des éléments :
static: position par défaut dans le flux du document.relative: décalage par rapport à sa position originale, sans affecter la disposition des autres éléments.absolute: positionnement par rapport à l'ancêtre positionné le plus proche (non statique) ou à la fenêtre si aucun ancêtre.fixed: positionnement fixe par rapport à la fenêtre, idéal pour les barres de navigation.
Exemple de mise en page avec positionnement :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démonstration du positionnement</title>
<style>
.cadre {
background-color: #222;
width: 600px;
height: 600px;
position: relative;
margin: 20px;
}
.boite-rel {
background-color: #0f0;
width: 300px;
height: 300px;
position: relative;
top: 50px;
left: 50px;
}
.boite-abs {
background-color: #f0f;
width: 200px;
height: 200px;
position: absolute;
bottom: 10px;
right: 10px;
}
.boite-fix {
background-color: #ff0;
width: 150px;
height: 150px;
position: fixed;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="cadre">
<div class="boite-rel"></div>
<div class="boite-abs"></div>
</div>
<div class="boite-fix"></div>
</body>
</html>
La boîte fixe reste visible lors du défilement, tandis que les autres boîtes se positionnent selon leurs règles respectives.