Cours CSS en PDF (Intermédiaire)
Langage CSS : Le CSS (Cascading Style Sheets) est un langage déclaratif de feuilles de style qui décrit la présentation d'un document HTML en séparant le contenu de la mise en forme. Il impose une uniformité visuelle sur un site, contrôle la typographie, les couleurs, les bordures et le positionnement des blocs, ce qui simplifie la maintenance et les refontes. Ce PDF gratuit inclut exemples et exercices pratiques pour télécharger et tester immédiatement les règles et la structure de feuilles de style.
Prérequis pour ce cours intermédiaire
Niveau attendu : maîtrise du HTML5 (structure sémantique, balises de base) et bonnes connaissances des sélecteurs CSS simples (éléments, classes, IDs). Une pratique minimale de l'éditeur de code et de l'inspecteur de navigateurs facilite l'exécution des exercices. Le cours suppose que vous savez déjà créer des pages HTML valides et appliquer règles CSS élémentaires.
🎯 Ce que vous allez apprendre
- Application des feuilles de style — comment associer une feuille de style à une page HTML via la balise
<link rel="stylesheet" href="...">, et quand préférer une intégration via<style>ou l'attributstyle="...". Organisation des fichiers.csspour réutilisabilité et maintenance. - Syntaxe et sélecteurs — structure d'une règle (
sélecteur { propriété: valeur; }), sélecteurs groupés, héritage et cascade. Calcul de la spécificité pour anticiper quelle règle s'applique. - Modèle de boîte (box model) — distinction entre content, padding, border et margin, et impact sur
widthetheight. Utilisation dedisplaypour contrôler le flux des boîtes. - Propriétés de présentation essentielles — gestion des polices (
font-family,font-size), couleurs, fonds et bordures pour normaliser lisibilité et identité visuelle. - Mise en page et positionnement — flux normal vs positionnement hors flux, structure de gabarit (header, main, aside, footer) et comportements au redimensionnement.
- Pratique guidée — exercices pas à pas utilisant
<div class="...">, classes, et études de cas applicables sur maquettes concrètes.
📑 Sommaire du document
- Conception de sites web — Feuille de styles CSS
- Application d’une feuille de style
- CSS : la syntaxe
- Quelques propriétés (texte, fond, bordures, listes)
- Mise en boîte,
<div>et class - Positionnement des boîtes
- Flexbox et Grid
💡 Pourquoi choisir ce cours ?
Le document d'Antoine Blanc privilégie une pédagogie progressive : concepts fondamentaux suivis d'exemples et d'exercices exploitables immédiatement. L'accent est mis sur la séparation contenu/présentation et sur un flux de travail pratique (schématisation de la feuille, arbre logique, feuille de style descendante). Les exemples ciblés sur le modèle de boîte facilitent l'assimilation des comportements de mise en page.
Contenu revu pour conformité aux spécifications CSS du W3C et aux bonnes pratiques d'accessibilité.
Prêt à pratiquer ? Cliquez sur le bouton ci-dessous pour télécharger le support complet.
Flexbox et Grid
Flexbox et Grid répondent à des besoins complémentaires : Flexbox excelle pour l'alignement et la distribution sur une seule dimension (ligne ou colonne), Grid gère une grille bidimensionnelle pour des mises en page plus structurées. Le choix dépend du cas d'usage : alignement linéaire et répartition d'espace avec Flexbox ; zones clairement définies et contrôle des lignes/colonnes avec Grid.
/* Flexbox : conteneur */
.container { display: flex; gap: 1rem; align-items: center; }
/* Grid : conteneur */
.grid { display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; }Maîtriser le Responsive Design avec les Media Queries
Le responsive design permet d'adapter l'interface aux différentes largeurs d'écran en combinant unités flexibles et règles conditionnelles via @media. Les media queries ciblent des caractéristiques du viewport (largeur, orientation, résolution) pour appliquer des ajustements de mise en page, typographie et visibilité des éléments. L'utilisation judicieuse des breakpoints améliore l'accessibilité et la lisibilité sur mobile et tablette.
@media (max-width: 768px) {
.nav { display: none; }
.container { grid-template-columns: 1fr; }
}L'héritage et la cascade en pratique
L'héritage transmet certaines propriétés (par exemple color, font-family) aux descendants, tandis que d'autres propriétés (margin, padding, border) ne le sont pas par défaut. Utilisez les valeurs inherit, initial ou unset pour contrôler explicitement la transmission. La cascade continue de s'appliquer : origine des styles, spécificité et ordre d'apparition déterminent la règle finale.
Héritage et ordre de priorité des styles
L'ordre d'appel et de fusion des styles influence directement l'apparence finale. Les feuilles externes sont chargées dans l'ordre où elles sont référencées : une règle définie dans la feuille chargée en dernier peut écraser une règle identique définie précédemment si la spécificité est égale. Les styles internes (<style>) situés dans le <head> sont évalués après les fichiers externes inclus avant eux, et les styles inline (style="...") ont une priorité supérieure à la plupart des sélecteurs externes. L'usage de @import modifie l'ordre de chargement et peut entraîner des latences; évitez les imports inutiles. En cas de conflit persistant, !important force l'application, mais son usage doit rester exceptionnel pour préserver la maintenabilité.
Modèle de boîte (box model) — détails et comportements inline/block
Le modèle de boîte sépare contenu, padding, border et margin ; le calcul de la taille visuelle dépend de la propriété box-sizing. En complément, les propriétés d'affichage définissent le flux normal :
display: block: éléments occupant une ligne entière (ex.<div>,<header>,<nav>), provoquent un retour à la ligne avant et après.display: inline: éléments intégrés dans le flux de texte (ex.<span>,<a>), ne respectent pas les dimensionswidth/heightet n'ajoutent pas de saut de ligne.display: inline-block: comportement mixte — côte à côte dans le flux normal tout en acceptant des dimensions; utile pour composants alignés sans casser le flux.
Les balises structurantes courantes adoptent par défaut display:block, alors que les balises de texte sont généralement inline. Comprendre ces comportements facilite la conception web et la gestion du flux normal lors de la création de mises en page réactives.
Sélecteurs avancés et Pseudo-classes
Les sélecteurs avancés permettent des ciblages précis sans ajouter d'éléments HTML. Exemples utiles : :hover pour états d'interaction, :nth-child() pour sélectionner un nœud selon sa position, et les sélecteurs d'attributs ([attr="value"]) pour cibler par attribut. L'usage combiné de ces sélecteurs réduit la surcharge de classes et améliore la maintenabilité.
a[href^="https"] { color: green; } /* sélecteur d'attribut */
li:nth-child(2) { font-weight: bold; }
button:hover { opacity: 0.9; }De la maquette au code : conception de sites web
Un workflow structuré accélère la production et facilite la maintenance. Étapes recommandées pour la conception de sites web :
- Maquettage : wireframes et prototypes pour valider l'ergonomie et la hiérarchie visuelle.
- Zonage : définir l'architecture des pages (header, main, aside, footer) et les patterns réutilisables.
- Prototypage interactif : vérifier comportements responsives et transitions.
- Structuration HTML sémantique : poser une base accessible et indexable.
- Architecture CSS : variables, composants, utilities, et conventions de nommage pour la réutilisabilité.
- Tests, optimisation et déploiement : validation accessibilité, performances et compatibilité navigateurs.
Héritage et spécificité (calcul)
L'application d'une règle CSS dépend de l'origine, de la spécificité et de l'ordre. Les propriétés héritables (ex. color, font-family) se transmettent aux descendants sauf override. Pour déterminer quel sélecteur l'emporte, calculez la spécificité en additionnant les poids définis ci‑dessous :
| Sélecteur | Poids |
|---|---|
| ID | 100 |
| Classe / pseudo‑classe / attribut | 10 |
| Élément / pseudo‑élément | 1 |
En cas d'égalité de spécificité, la règle la plus tardive dans le fichier ou la feuille chargée en dernier l'emporte. Ces principes sont au cœur de la spécificité CSS et de la gestion des conflits de style.
Exercices pratiques inclus dans le PDF
Le PDF contient une série d'exercices progressifs : construction d'un layout responsive, exercices sur le modèle de boîte (padding/margin/border), défis de spécificité et mini-projets utilisant Flexbox et Grid. Chaque exercice est accompagné d'objectifs clairs, d'indices pour le débogage et d'exemples de solutions commentées pour faciliter l'apprentissage autonome.
❓ Foire Aux Questions (FAQ)
- Comment la cascade choisit-elle une règle conflictuelle ? — priorité : origine des styles, spécificité des sélecteurs, puis ordre d'apparition ; en cas d'égalité, la dernière règle lue prévaut.
- Que retenir sur margin vs padding ? —
marginespace les boîtes entre elles ;paddingespace le contenu à l'intérieur d'une boîte et affecte la zone d'arrière‑plan.
À propos de l'auteur
Antoine Blanc — auteur du cours (métadonnées). Le contenu a été relu pour conformité aux spécifications CSS du W3C et aux recommandations d'accessibilité, garantissant rigueur méthodologique et applicabilité professionnelle.
