CSS formatting
Le CSS (Cascading Style Sheets) est le langage qui donne vie à vos pages web en contrôlant leur apparence visuelle. Maîtriser les feuilles de style en cascade vous permettra de transformer vos documents HTML en interfaces attrayantes et professionnelles.
Educational objectives
- Expliquer le principe de fonctionnement des feuilles de style en cascade
- Créer et appliquer des styles inline pour modifier l’apparence d’éléments HTML
- Utiliser différents types de sélecteurs CSS pour cibler des éléments spécifiques
- Comprendre la priorité et l’héritage des styles CSS
- Structurer une feuille de style externe pour organiser efficacement le code CSS
Qu’est-ce que le CSS ?
CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour décrire la présentation d’un document HTML. Le terme « cascade » fait référence au mécanisme fondamental qui détermine quels styles s’appliquent à un élément lorsque plusieurs règles entrent en conflit. Cette cascade suit un ordre de priorité précis : d’abord l’importance (règles marquées !important), puis la spécificité du sélecteur, et enfin l’ordre d’apparition dans le code.
Séparation du contenu et de la présentation
L’un des principes fondamentaux du CSS est la séparation claire entre le contenu (HTML) et la présentation (CSS). Cette approche offre de nombreux avantages : maintenance simplifiée, réutilisabilité des styles, amélioration des performances et meilleure accessibilité. Un même document HTML peut ainsi avoir différentes présentations selon le contexte (écran, impression, mobile) en changeant simplement la feuille de style.
Key point : La cascade CSS détermine automatiquement quels styles s’appliquent en cas de conflit, suivant les règles de priorité et de spécificité.
Key points to remember
Le CSS sépare le contenu HTML de sa présentation grâce au mécanisme de cascade qui résout automatiquement les conflits entre styles.
🎯 Mini-exercice : Découvrir la cascade
Observez comment la cascade résout le conflit entre deux règles qui ciblent le même élément avec des couleurs différentes.
Reference code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Cascade CSS</title>
</head>
<body>
<h1 class="titre">Mon titre principal</h1>
<p>Un paragraphe de démonstration.</p>
</body>
</html>
/* Première règle */
.titre {
color: blue;
font-size: 24px;
}
/* Seconde règle - plus spécifique */
h1.titre {
color: red;
font-weight: bold;
}
p {
color: #333;
line-height: 1.6;
}
Monaco Editor v0.45
Les styles inline
Les styles inline sont appliqués directement sur un élément HTML via l’attribut « style ». Cette méthode offre la priorité la plus élevée dans la cascade CSS (excepté pour !important). Par exemple : <p style=" »color:" red; font-size: 18px; »>. Bien qu’efficaces pour des modifications ponctuelles, les styles inline présentent des inconvénients majeurs : ils mélangent contenu et présentation, rendent la maintenance difficile et ne sont pas réutilisables.
Les styles intégrés dans le document
Les styles intégrés sont définis dans la balise <style> située dans la section <head> du document HTML. Cette approche permet de centraliser les styles pour une page spécifique tout en gardant une séparation relative entre HTML et CSS. Les styles intégrés ont une priorité intermédiaire dans la cascade, plus faible que les styles inline mais plus élevée que les feuilles de style externes. Cette méthode convient pour des styles spécifiques à une seule page.
Key point : Les styles inline ont la priorité la plus élevée mais nuisent à la maintenabilité du code, tandis que les styles intégrés offrent un compromis pour des besoins ponctuels.
Key points to remember
Les styles inline offrent la priorité maximale mais compromettent la maintenance, les styles intégrés conviennent aux besoins spécifiques d’une page.
🎯 Mini-exercice : Appliquer des styles inline
Modifiez l’apparence d’éléments HTML en utilisant l’attribut style directement dans les balises.
Reference code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Styles Inline</title>
<style>
h2 { color: blue; }
</style>
</head>
<body>
<h2>Titre avec style intégré</h2>
<h2 style="color: red; font-size: 28px;">Titre avec style inline</h2>
<p style="background-color: yellow; padding: 10px;">Paragraphe stylé inline</p>
</body>
</html>
/* Styles intégrés dans le HTML */ /* Voir la balise <style> dans la section <head> */
Monaco Editor v0.45
Sélecteurs de base
Les sélecteurs CSS permettent de cibler précisément les éléments HTML à styliser. Les sélecteurs de type (h1, p, div) ciblent tous les éléments d’une balise donnée. Les sélecteurs de classe (.ma-classe) ciblent les éléments ayant un attribut class spécifique, tandis que les sélecteurs d’ID (#mon-id) ciblent un élément unique avec un attribut id particulier. Le sélecteur universel (*) s’applique à tous les éléments de la page.
Sélecteurs de combinaison
Les sélecteurs de combinaison permettent de cibler des éléments selon leur position dans le DOM. Le sélecteur descendant (div p) cible tous les paragraphes à l’intérieur d’un div. Le sélecteur enfant direct (div > p) ne cible que les paragraphes directement enfants d’un div. Le sélecteur frère adjacent (h2 + p) cible le premier paragraphe suivant immédiatement un h2. Ces combinaisons offrent une grande précision dans le ciblage des éléments.
Key point : La spécificité des sélecteurs détermine leur priorité : ID (100 points) > classe (10 points) > type (1 point). Plus un sélecteur est spécifique, plus il a de chances de s’appliquer.
Key points to remember
Les sélecteurs CSS permettent un ciblage précis des éléments, leur spécificité détermine leur priorité dans la cascade.
🎯 Mini-exercice : Utiliser différents sélecteurs
Explorez les sélecteurs de type, classe, ID et combinaison pour cibler précisément des éléments HTML.
Reference code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sélecteurs CSS</title>
</head>
<body>
<h1 id="titre-principal">Main title</h1>
<div class="contenu">
<p>Premier paragraphe dans la div</p>
<p class="important">Paragraphe important</p>
</div>
<p>Paragraphe hors de la div</p>
</body>
</html>
/* Sélecteur d'ID */
#titre-principal {
color: navy;
font-size: 32px;
}
/* Sélecteur de classe */
.important {
background-color: lightyellow;
font-weight: bold;
}
/* Sélecteur descendant */
.contenu p {
margin-left: 20px;
color: #666;
}
/* Sélecteur de type */
p {
line-height: 1.5;
}
Monaco Editor v0.45
Calcul de la spécificité
La spécificité CSS détermine quel style s’applique lorsque plusieurs règles ciblent le même élément. Elle se calcule selon un système de points : les styles inline valent 1000 points, chaque ID vaut 100 points, chaque classe, attribut ou pseudo-classe vaut 10 points, et chaque élément ou pseudo-élément vaut 1 point. Par exemple, « div.menu #nav » a une spécificité de 111 (1+10+100). En cas d’égalité, c’est la dernière règle déclarée qui l’emporte.
Héritage des propriétés
L’héritage permet aux éléments enfants de récupérer automatiquement certaines propriétés CSS de leurs parents. Les propriétés liées au texte (color, font-family, font-size) sont généralement héritées, contrairement aux propriétés de mise en page (margin, padding, border). On peut forcer l’héritage avec la valeur « inherit » ou l’empêcher avec « initial ». Cette mécanique évite la répétition de code et assure une cohérence visuelle naturelle.
Key point : La règle !important outrepasse la spécificité normale, mais son usage doit rester exceptionnel car elle complique la maintenance du code.
Key points to remember
La spécificité CSS suit un système de points précis, tandis que l’héritage transmet naturellement certaines propriétés des parents aux enfants.
🎯 Mini-exercice : Comprendre priorité et héritage
Observez comment la spécificité et l’héritage influencent l’application des styles sur des éléments imbriqués.
Reference code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Priorité et Héritage</title>
</head>
<body>
<div class="parent" id="conteneur">
<p class="enfant">Texte avec héritage de couleur</p>
<span>Span hérite aussi des styles</span>
</div>
</body>
</html>
/* Styles hérités */
.parent {
color: blue;
font-family: Arial;
border: 2px solid red; /* Ne s'hérite pas */
}
/* Spécificité faible (10 points) */
.enfant {
color: green;
}
/* Spécificité élevée (110 points) */
#conteneur .enfant {
color: purple;
font-weight: bold;
}
span {
display: block;
margin-top: 10px;
}
Monaco Editor v0.45
Création et liaison d’une feuille de style externe
Les feuilles de style externes constituent la méthode recommandée pour organiser le CSS. On crée un fichier .css séparé (comme styles.css) que l’on lie au HTML via la balise <link rel= »stylesheet » href= »styles.css »> dans la section <head>. Cette approche offre de nombreux avantages : séparation complète du contenu et de la présentation, réutilisation sur plusieurs pages, mise en cache par le navigateur pour de meilleures performances, et collaboration facilitée entre développeurs.
Organisation et structure du code CSS
Une feuille de style bien structurée améliore la maintenance et la lisibilité. Il est recommandé d’organiser le CSS par sections : reset/normalize, styles généraux, layout, composants, puis pages spécifiques. L’utilisation de commentaires pour délimiter les sections, l’indentation cohérente et la nomenclature claire des classes (méthodologie BEM par exemple) facilitent le travail en équipe. Les propriétés peuvent être regroupées logiquement : positionnement, modèle de boîte, typographie, puis décoration.
Key point : Les feuilles de style externes permettent la réutilisation, améliorent les performances grâce à la mise en cache et facilitent la maintenance du code.
Key points to remember
Les feuilles de style externes offrent la meilleure approche pour organiser le CSS : réutilisables, performantes et maintenables.
🎯 Mini-exercice : Structurer une feuille de style
Découvrez comment organiser efficacement votre CSS externe avec des sections commentées et une hiérarchie claire.
Reference code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Feuille de style externe</title>
<!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
<header class="header">
<h1 class="header__title">My Website</h1>
</header>
<main class="main-content">
<article class="article">
<h2 class="article__title">Article principal</h2>
<p class="article__text">Contenu de l'article...</p>
</article>
</main>
</body>
</html>
/* ===========================
RESET ET STYLES GÉNÉRAUX
=========================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* ===========================
HEADER
=========================== */
.header {
background-color: #2c3e50;
padding: 20px 0;
text-align: center;
}
.header__title {
color: white;
font-size: 28px;
}
/* ===========================
CONTENU PRINCIPAL
=========================== */
.main-content {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}
.article__title {
color: #2c3e50;
margin-bottom: 16px;
}
.article__text {
color: #666;
margin-bottom: 16px;
}
Monaco Editor v0.45
Summary
Key points to remember
- Principe de cascade : Le CSS résout automatiquement les conflits entre styles selon des règles de priorité et de spécificité précises
- Méthodes d’intégration : Les styles inline ont la priorité maximale, les styles intégrés conviennent aux besoins ponctuels, les feuilles externes sont recommandées
- CSS Selectors : Ils permettent un ciblage précis des éléments avec une spécificité calculée (ID > classe > type)
- Héritage des propriétés : Certaines propriétés CSS se transmettent naturellement des éléments parents aux enfants
- Organisation du code : Les feuilles de style externes bien structurées améliorent la maintenance, les performances et la réutilisabilité
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
