Documentation CSS
Référence CSS concise et illustrée par des exemples. Lisez le concept, voyez le code, puis pratiquez-le dans un parcours Coddy.
Commencer un parcours guidé en CSSPour commencer
- CSS inlineLe CSS inline place les déclarations directement sur un élément avec l'attribut style. Découvrez la syntaxe, les cas où un style inline est le bon choix, pourquoi il l'emporte sur les feuilles de style et comment il se compare au CSS interne et externe.
- CSS externeLe CSS externe se trouve dans un fichier .css que chaque page lie avec <link rel="stylesheet"> ; le CSS interne se place dans un élément <style> à l'intérieur d'une page. Découvrez les deux, le fonctionnement des chemins de fichiers et la règle qui gagne quand ils se rencontrent.
- Commentaire CSSLe CSS n'a qu'une syntaxe de commentaire, /* ... */, pour une ou plusieurs lignes. Découvrez où placer un commentaire, comment commenter une règle et pourquoi // et les commentaires imbriqués cassent silencieusement la règle suivante.
- !important CSS!important fait gagner une déclaration sur les déclarations normales, quelle que soit leur spécificité. Découvrez exactement ce qu'il bat, ce qui le bat, comment fonctionne la spécificité en dessous et les façons plus propres de gagner un conflit de styles.
- Variables CSSLes variables CSS (propriétés personnalisées) stockent une valeur une fois pour la réutiliser avec var(). Découvrez comment les déclarer dans :root, les limiter à un composant et les surcharger, leur donner une valeur de secours, changer de thème avec JavaScript et éviter le piège de la valeur invalide.
Sélecteurs
- Sélecteurs CSSUn sélecteur CSS choisit les éléments qu'une règle met en forme. Découvrez tous les types de sélecteurs, les quatre combinateurs (descendant, enfant, frère adjacent, frère général), les sélecteurs d'attribut, le regroupement, et testez des sélecteurs en direct.
- Sélecteur de classeLe sélecteur de classe (.nom) met en forme tous les éléments qui ont cette classe ; le sélecteur d'ID (#nom) cible le seul élément qui a cet id. Découvrez la syntaxe, les classes multiples et enchaînées, class ou id, les règles de nommage et l'ajout de classes avec JavaScript.
- Pseudo-classes CSSLes pseudo-classes sélectionnent des éléments selon leur position ou leur état : :nth-child(), :first-child, :not(), :focus, :checked, :has() et d'autres. Découvrez la syntaxe, la formule an+b avec un testeur en direct et la différence entre nth-child et nth-of-type.
- ::before et ::after::before et ::after insèrent du contenu généré comme premier et dernier enfant d'un élément, directement depuis le CSS. Découvrez la propriété content, pourquoi un content vide est obligatoire, comment les positionner, les infobulles avec attr(), les compteurs et les éléments où ils ne fonctionnent pas.
- Hover CSSLa pseudo-classe :hover met en forme un élément pendant que le pointeur le survole. Découvrez les effets de survol sur les boutons et les cartes, les transitions fluides, les couleurs des liens avec :link, :visited, :hover et :active dans le bon ordre, et le survol sur écran tactile.
Modèle de boîte
- Modèle de boîteChaque élément est une boîte faite de quatre couches : contenu, padding, bordure et margin. Découvrez comment chaque couche s'ajoute à la taille, comment box-sizing: border-box change le calcul, et voyez chaque couche mesurée en direct.
- Padding CSSLe padding est l'espace à l'intérieur d'un élément, entre son contenu et sa bordure. Découvrez le raccourci padding de 1 à 4 valeurs, les propriétés par côté, le padding logique, les pourcentages et la façon dont le padding change la taille d'un élément.
- Margin CSSLa margin est l'espace transparent à l'extérieur de la bordure d'un élément, qui éloigne les autres éléments. Découvrez le raccourci margin, le centrage avec margin: 0 auto, les marges négatives, margin auto en flexbox et pourquoi les marges verticales fusionnent.
- Margin vs paddingLe padding est l'espace à l'intérieur de la bordure d'un élément ; la margin, l'espace à l'extérieur. Voyez les deux sur la même boîte, côte à côte et en direct, puis apprenez lequel utiliser pour les fonds, les zones cliquables, l'espace entre éléments et le centrage.
- Bordure CSSLa propriété border trace une ligne autour du padding d'un élément. Découvrez le raccourci border, tous les styles de bordure, les couleurs et les côtés seuls, les coins arrondis avec border-radius, et la différence entre bordure et outline.
- Width et heightwidth et height définissent la taille de la boîte d'un élément. Découvrez les tailles fixes et en pourcentage, pourquoi height: 100% ne fait souvent rien, min-height et max-width pour des mises en page souples, auto ou 100 %, et les mots-clés fit-content.
Texte et polices
- Taille de policeLa propriété font-size définit la taille du texte. Découvrez les unités qu'elle accepte (px, rem, em, %, mots-clés, vw), comment changer la taille du texte en HTML, pourquoi rem est le choix sûr par défaut et comment les tailles en em se multiplient.
- Font-weight CSSLa propriété font-weight rend le texte gras, léger ou entre les deux. Découvrez l'échelle numérique de 100 à 900, normal et bold, les valeurs relatives bolder et lighter, et pourquoi une graisse ne change parfois rien.
- Interligne CSSline-height définit la hauteur de chaque ligne de texte, et donc l'espace entre les lignes. Découvrez pourquoi un nombre sans unité est le bon choix par défaut, comment les valeurs en px, em et % s'héritent différemment, et les bonnes valeurs pour le texte courant et les titres.
- Couleur du texteLa balise <font color> est obsolète ; la couleur du texte en HTML se définit avec la propriété CSS color. Découvrez comment colorer toute une page, un mot, un lien ou un titre, avec des couleurs nommées, en hexadécimal ou en rgb, et comment garder un texte lisible.
- Souligner en CSSSoulignez du texte avec text-decoration, puis contrôlez la ligne : sa couleur, son style, son épaisseur et sa distance au texte. Découvrez aussi comment retirer le soulignement des liens, et quand il vaut mieux ne pas le faire.
- Ombre du textetext-shadow dessine une ou plusieurs ombres derrière le texte. Découvrez les quatre valeurs (décalage x, décalage y, flou, couleur), comment empiler des ombres pour des effets de lueur, de contour et de 3D, et comment une ombre garde un texte lisible sur un fond chargé.
Couleurs et arrière-plans
- Couleurs CSSToutes les façons d'écrire une couleur en CSS : couleurs nommées, codes hexadécimaux, rgb() et rgba(), hsl(), transparence avec un canal alpha, currentColor, et les plus récents oklch() et color-mix(). Chacune avec un exemple en direct et un convertisseur.
- Couleur de fondbackground-color remplit la boîte d'un élément avec une couleur. Découvrez comment définir la couleur de fond d'une page entière, d'une div, d'une ligne de tableau ou d'un mot, comment fonctionne la transparence, pourquoi bgcolor est obsolète et en quoi background-color diffère du raccourci background.
- Image de fondbackground-image place une image ou un dégradé derrière le contenu d'un élément. Découvrez url() et les dégradés, background-size (cover et contain), background-position, background-repeat, la superposition de plusieurs fonds et le raccourci background.
- Dégradé CSSLes dégradés CSS sont des images que le navigateur dessine à partir de couleurs. Découvrez radial-gradient (forme, taille, position), linear-gradient (direction et angles), conic-gradient, les arrêts de couleur, les arrêts nets pour les rayures, les dégradés répétés et le texte en dégradé.
- Box-shadow CSSbox-shadow dessine des ombres autour de la boîte d'un élément. Découvrez les cinq valeurs (x, y, flou, diffusion, couleur), les ombres intérieures, la superposition de plusieurs ombres pour une profondeur réaliste, les anneaux de focus faits avec spread, et les erreurs qui rendent les ombres ternes.
Mise en page
- Display CSSLa propriété display décide comment un élément participe à la mise en page. Découvrez block, inline et inline-block avec des boîtes mesurées côte à côte, display none ou visibility hidden, et la place de flex, grid, flow-root et contents.
- Position CSSposition: absolute place un élément à des coordonnées exactes dans son ancêtre positionné le plus proche. Découvrez comment absolute fonctionne avec position: relative, puis fixed et sticky, les propriétés top/right/bottom/left et inset, et pourquoi sticky ne colle parfois pas.
- z-index CSSz-index décide quel élément passe devant quand plusieurs se chevauchent. Découvrez sur quels éléments il fonctionne, comment les contextes d'empilement regroupent les éléments au point qu'un z-index de 9999 peut perdre, ce qui crée un contexte d'empilement et comment réparer un z-index qui ne marche pas.
- Overflow CSSoverflow décide de ce qui arrive au contenu qui ne tient pas dans sa boîte : l'afficher, le couper ou ajouter des barres de défilement. Découvrez visible, hidden, scroll, auto et clip, overflow-x et overflow-y, les points de suspension et les effets de bord d'overflow sur la mise en page.
- Float CSSfloat pousse un élément d'un côté et laisse le texte l'entourer, comme les magazines placent leurs photos. Découvrez float left, right et inline-start, clear, pourquoi un parent s'effondre autour des flottants et comment display: flow-root le répare, et pourquoi les flottants ne servent plus à la mise en page.
- Centrer une divToutes les façons de centrer une div horizontalement, verticalement ou les deux : flexbox, grid, margin auto, position absolue avec transform, inset avec margin auto, et align-content. Chaque méthode tourne en direct et mesure son propre centrage, avec un tableau pour savoir laquelle choisir.
- Centrer une imageUne <img> est inline, elle se centre donc comme du texte : text-align: center sur son parent. Vous pouvez aussi en faire un bloc avec margin: 0 auto, ou la centrer avec flexbox ou grid, y compris verticalement. Chaque méthode tourne en direct et mesure le résultat.
Flexbox et Grid
- Flexbox CSSFlexbox dispose des éléments en ligne ou en colonne et contrôle comment ils se partagent l'espace et s'alignent. Découvrez display: flex, l'axe principal et l'axe secondaire, toutes les propriétés du conteneur, flex-grow, flex-shrink et flex-basis, avec un bac à sable en direct qui mesure où chaque élément se place.
- Justify-content CSSjustify-content place les éléments flex le long de l'axe principal et align-items le long de l'axe secondaire. Voyez toutes les valeurs côte à côte, mesurées, avec une grille d'alignement cliquable, align-self, et les raisons pour lesquelles justify-content ne fait parfois rien.
- Flex-wrap CSSflex-wrap décide si les éléments flex se serrent sur une ligne ou passent à la suivante, et flex-direction s'ils s'écoulent en ligne ou en colonne. Découvrez les deux avec des exemples en direct, le raccourci flex-flow, align-content, et une rangée de cartes responsive sans media query.
- CSS GridCSS Grid dispose les éléments en lignes et en colonnes en même temps. Découvrez display: grid, grid-template-columns, l'unité fr, repeat() et minmax(), auto-fill ou auto-fit, le placement des éléments avec grid-column et grid-template-areas, avec une grille en direct que vous modifiez et mesurez.
Design responsive
- Media queries CSSUne media query n'applique du CSS que lorsqu'une condition est vraie, comme une largeur d'écran minimale, un thème sombre ou un pointeur de souris. Découvrez la syntaxe @media, les breakpoints mobile first, la syntaxe de plage, prefers-color-scheme, matchMedia en JavaScript et les container queries.
- Unités rem et emrem est relatif à la taille de police racine, em à la taille de police de l'élément courant, px est fixe et % dépend de la propriété. Voyez chaque unité mesurée dans une démo imbriquée, pourquoi em se multiplie, quand utiliser laquelle, et comment fonctionnent vw, vh et dvh.
- clamp() CSSclamp(MIN, PREFERRED, MAX) renvoie la valeur préférée, mais jamais moins que MIN ni plus que MAX. Découvrez comment elle rend fluides les tailles de police et les espacements sans media query, comment calculer la valeur du milieu, et le lien avec min() et max().
- calc() CSScalc() permet de faire des calculs en CSS et de mélanger les unités, comme 100 % moins une barre latérale fixe de 200px. Découvrez les règles de syntaxe (les espaces comptent), calc() avec les variables CSS, les mises en page courantes qu'il résout et pourquoi un calc() invalide est ignoré sans avertissement.
Transitions et effets
- Transition CSSUne transition CSS anime une propriété de son ancienne valeur vers la nouvelle quand elle change, par exemple au survol. Découvrez le raccourci transition, toutes les fonctions de temporisation côte à côte, ce qui peut ou non être animé, l'astuce pour height: auto, et la réduction des animations.
- Animation CSSLes animations CSS font passer un élément par les étapes que vous définissez dans @keyframes, toutes seules et aussi souvent que vous le voulez. Découvrez la syntaxe @keyframes, les huit propriétés d'animation, fill-mode et direction, les indicateurs de chargement, la mise en pause et le respect de la réduction des animations.
- Transform CSSLa propriété transform déplace, redimensionne, fait pivoter et incline un élément sans changer la mise en page autour de lui. Découvrez toutes les fonctions de transformation, pourquoi l'ordre des fonctions compte, transform-origin, les propriétés séparées translate, scale et rotate, et l'astuce de centrage translate(-50%, -50%).
- Rotation CSSFaites pivoter un élément avec transform: rotate(45deg) ou la propriété rotate, plus récente. Découvrez les unités d'angle (deg, turn, rad), la rotation autour d'un coin avec transform-origin, la rotation de textes et d'icônes, un indicateur de chargement qui tourne et la rotation 3D avec rotateX et rotateY.
- Opacité CSSopacity rend transparents un élément entier et tout ce qu'il contient, de 0 (invisible) à 1 (opaque). Découvrez les valeurs, pourquoi opacity estompe aussi le texte et comment rendre seulement le fond transparent, opacity: 0 face à visibility et display, et les fondus au survol.
- Flou CSS (blur)filter: blur(5px) floute un élément, et backdrop-filter: blur() floute ce qui se trouve derrière lui. Découvrez toutes les fonctions de filtre (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) avec des curseurs en direct, comment les combiner, et le problème des bords flous.
