CSS = Cascading Style Sheets.
Soit en français les feuilles de styles en cascade.
CSS est un langage de mise en forme qui peut s'appliquer à de nombreux types de documents mais son utilisation la plus courante est la mise en forme des pages HTML ou des documents XML.
HTML comporte lui aussi des possibilités de mise en forme mais, depuis
la version HTML5, la mise en forme directe par HTML est devenue obsolète.
Il est en effet souhaitable de séparer les données et la mise en forme :
- HTML véhicule les informations proprement dites,
- CSS s'occupe de leur mise en forme.
CSS est un langage déclaratif facile à appréhender. Sa seule difficulté est de comporter beaucoup de mots clés. Ce site est là pour vous aider à retrouver les syntaxes.
Pour découvrir les principes de base du CSS, commencez votre lecture par les tutoriels. Vous pouvez aussi accéder directement à :
@keyframes (directive) : Définition d'une animation.animation (propriété) : Paramètres d'animation.animation-delay (propriété) : Temps d'attente avant le démarrage de l'animation.animation-direction (propriété) : Sens de l'animation (normal ou inverse).animation-duration (propriété) : Durée d'une animation.animation-fill-mode (propriété) : Style de remplacement lorsque l'animation n'est pas en cours.animation-iteration-count (propriété) : Nombre de répétition de l'animation.animation-name (propriété) : Nom d'une animation.animation-play-state (propriété) : État de l'animation (en cours ou en pause).animation-timing-function (propriété) : Fonction non linéaire définissant la progression d'une animation.backface-visibility (propriété) : Visibilité de la face arrière de l'élément (pendant sa rotation).cubic-bezier() (fonction) : Détermine une progression non linéaire pour les animations.steps() (fonction) : Définit une animation saccadée, pas par pas.transition (propriété) : Effet d'animation simple.transition-delay (propriété) : Temps d'attente avant que la transition ne commence.transition-duration (propriété) : Durée de la transition.transition-property (propriété) : Propriété sur laquelle doit s'appliquer la transition.transition-timing-function (propriété) : Fonction définissant une transition non linéaire.background (propriété) : Résumé des propriétés de l'arrière-plan.background-attachment (propriété) : Mode de défilement de l'image d'arrière-plan.background-blend-mode (propriété) : Interaction entre couleur et image d'arrière-plan.background-clip (propriété) : Interaction entre arrière-plan et bordure.background-color (propriété) : Couleur de l'arrière-plan.background-image (propriété) : Image d'arrière-plan.background-origin (propriété) : Position de l'image d'arrière-plan.background-position (propriété) : Emplacement de l'image d'arrière-plan.background-repeat (propriété) : Mode de répétition de l'image d'arrière-plan.background-size (propriété) : Dimensionnement de l'image d'arrière-plan.conic-gradient (fonction) : Définit un dégradé de couleurs conique.isolation (propriété) : Interaction entre les couches.linear-gradient() (fonction) : Détermine un dégradé de couleur linéaire.mix-blend-mode (propriété) : Mode de mélange entre le contenu et le fond de l'élément.opacity (propriété) : Opacité (ou transparence).radial-gradient() (fonction) : Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-linear-gradient() (fonction) : Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient() (fonction) : Détermine un dégradé de couleur radial avec répétition.border (propriété) : Résumé des propriétés des bordures.border-collapse (propriété) : Mode d'encadrement des cellules de tableau.border-color (propriété) : Couleur des bordures.border-image (propriété) : Résumé des propriétés des bordures réalisées avec des images.border-image-outset (propriété) : Débordement de l'image de bordure.border-image-repeat (propriété) : Mode de répétition de l'image de bordure.border-image-slice (propriété) : Définit comment l'image de bordure est découpée.border-image-source (propriété) : L'image utilisée pour construire la bordure.border-image-width (propriété) : La largeur de la bordure image.border-radius (propriété) : Rayon des angles arrondis.border-style (propriété) : Type de bordure (simple, double, pointillé...).border-width (propriété) : Epaisseur de la bordure.box-sizing (propriété) : Mode de calcul des dimensions de blocs.height (propriété) : Hauteur de l'élément.margin (propriété) : Résumé des quatre marges.margin-bottom (propriété) : Marge du bas.margin-left (propriété) : Marge de gauche.margin-right (propriété) : Marge de droite.margin-top (propriété) : Marge du haut.max-height (propriété) : Hauteur maxi.max-width (propriété) : Largeur maxi.min-height (propriété) : Hauteur mini.min-width (propriété) : Largeur mini.padding (propriété) : Marges intérieures des quatre cotés.width (propriété) : Largeur.hyphens (propriété) : Césure des mots.overflow-wrap (propriété) : Gestion des coupures de mots.white-space (propriété) : Gestion des espaces multiples et des retours chariot.word-break (propriété) : Coupure des mots longs.word-wrap (propriété) : Coupure des mots.attr() (fonction) : Renvoie la valeur d'un attribut.calc() (fonction) : Effectue un calcul.clamp() (fonction) : Limite une valeur entre deux valeurs extrêmes.max() (fonction) : Détermine la valeur la plus petite parmi une série de valeurs.min() (fonction) : Détermine la valeur la plus grande parmi une série de valeurs.background-color (propriété) : Couleur de l'arrière-plan.border-color (propriété) : Couleur des bordures.caret-color (propriété) : Couleur du marqueur de texte.color (propriété) : Couleur de l'avant plan.column-rule-color (propriété) : Couleur des lignes de séparation de colonnes.hsl() (fonction) : Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.hsla() (fonction) : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.hue-rotate() (fonction) : Change les couleurs d'une image (rotation des teintes).hwb() (fonction) : Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.outline-color (propriété) : Couleur de l'encadrement.rgb() (fonction) : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.rgba() (fonction) : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.text-decoration-color (propriété) : Couleur du trait de décoration.text-emphasis-color (propriété) : Couleur des caractères de mise en exergue.column-count (propriété) : Nombre de colonnes.column-fill (propriété) : Répartition du contenu entre les colonnes.column-gap (propriété) : Espacement des colonnes.column-rule (propriété) : Trait de séparation entre les colonnes.column-rule-color (propriété) : Couleur des lignes de séparation de colonnes.column-rule-style (propriété) : Style de la ligne de séparation des colonnes.column-rule-width (propriété) : Épaisseur de la ligne de séparation entre les colonnes.column-span (propriété) : Débordement sur plusieurs colonnes.column-width (propriété) : Largeur des colonnes.columns (propriété) : Largeur et nombre des colonnes.orphans (propriété) : Gestion des coupures en bas de page.widows (propriété) : Gestion des ruptures en haut de page.@charset (directive) : Jeu de caractères utilisé dans la feuille de styles.@counter-style (directive) : Définition d'un compteur personnalisé.attr() (fonction) : Renvoie la valeur d'un attribut.content (propriété) : Ajoute du contenu dans le document.counter() (fonction) : Renvoie la valeur actuelle d'un compteur.counter-increment (propriété) : Définit le pas d'incrémentation d'un compteur.counter-reset (propriété) : Initialise un compteur.counters() (fonction) : Renvoie la valeur d'un compteur hiérarchique.hanging-punctuation (propriété) : Marque de ponctuation.quotes (propriété) : Caractères utilisés pour les guillemets.display (propriété) : Type de l'élément et la façon de l'afficher.visibility (propriété) : Affichage ou masquage.align-content (propriété) : Disposition des lignes dans un flex box.align-items (propriété) : Disposition verticale des éléments dans un flex box.align-self (propriété) : Position verticale de l'un des enfants d'un flex box.display (propriété) : Type de l'élément et la façon de l'afficher.flex (propriété) : Dimensions, agrandissement ou rétrécissement des éléments dans un flex-box.flex-basis (propriété) : Dimension d'un élément contenu dans un flex-box.flex-direction (propriété) : Axe principal et secondaire d'un flex box.flex-flow (propriété) : Echaînement des éléments enfant dans un flex-box.flex-grow (propriété) : Possibilité de s'agrandir pour un élément contenu dans un flex-box.flex-shrink (propriété) : Possibilité de se comprimer, pour un élément contenu dans un flex-box.flex-wrap (propriété) : Gestion des retours à la ligne dans un container flex.justify-content (propriété) : Alignement horizontal dans un flex-box.order (propriété) : Ordre des éléments dans un flex-box.clear (propriété) : Gestion de l'habillage.float (propriété) : Positionnement relatif des éléments les uns par rapport aux autres.shape-outside (propriété) : Définit le contournement du texte pour un élément flottant.@font-face (directive) : Police de caractères personnalisée.font (propriété) : Résumé des propriétés concernant les caractères.font-family (propriété) : Police de caractères.font-feature-settings (propriété) : Mise en forme spécifiques des caractères.font-kerning (propriété) : Activation du crénage entre caractères.font-size (propriété) : Taille des caractères.font-size-adjust (propriété) : Définition du coefficient d'aspect de la police.font-stretch (propriété) : Etirement ou compression des caractères.font-style (propriété) : Italique.font-synthesis (propriété) : Autorisation ou non de calculer les styles manquants.font-variant (propriété) : Attributs typographiques évolués.font-variant-alternates (propriété) : Substitution de caractères.font-variant-caps (propriété) : Capitalisation des caractères.font-variant-east-asian (propriété) : Typographie spécifique aux caractères chinois ou japonais.font-variant-ligatures (propriété) : Ligature des caractères.font-variant-numeric (propriété) : Mode d'affichage des nombres.font-weight (propriété) : Graisse des caractères.text-decoration (propriété) : Soulignement ou rayure du texte.text-decoration-color (propriété) : Couleur du trait de décoration.text-decoration-line (propriété) : Type de décoration : souligné, barré, etc.text-decoration-style (propriété) : Type de trait pour la décoration : plein, pointillé, etc.text-shadow (propriété) : Ombrage du texte.text-transform (propriété) : Casse du texte (minuscules, majuscules...).grid (propriété) : Raccourci pour définir les principaux paramètres d'une grille.grid-area (propriété) : Emplacement d'un élément dans la grille.grid-auto-columns (propriété) : Mode de calcul des colonnes 'auto' dans une grille.grid-auto-flow (propriété) : Mode de calcul de l'emplacement des éléments dans la grille.grid-auto-rows (propriété) : Mode de calcul de la hauteur 'auto' des lignes dans une grille.grid-column (propriété) : Numéro de colonne(s) d'un élément dans une grille.grid-column-end (propriété) : Numéro de la colonne de fin d'un élément dans une grille.grid-column-gap (propriété) : Espacement des colonnes dans une grille.grid-column-start (propriété) : Numéro de la colonne de début d'un élément dans une grille.grid-gap (propriété) : Espacement des lignes et des colonnes dans une grille.grid-row (propriété) : Numéro des lignes d'un élément dans une grille.grid-row-end (propriété) : Numéro de la ligne de fin d'un élément dans une grille.grid-row-gap (propriété) : Espacement des lignes dans une grille.grid-row-start (propriété) : Numéro de la ligne de départ d'un élément dans une grille.grid-template (propriété) : Largeur des colonnes et hauteur des lignes d'une grille.grid-template-areas (propriété) : grid-template-columns (propriété) : Nombre et largeurs des colonnes d'une grille.grid-template-rows (propriété) : Nombre et hauteur des lignes d'une grille.repeat() (fonction) : Répète une valeur un certain nombre de fois.blur() (fonction) : Applique un effet de flou à une image.brightness() (fonction) : Ajuste la luminosité d'une image.clip (propriété) : Partie visible de l'élément.clip-path (propriété) : Partie de l'élément à afficher, délimitée par une forme géométrique (rectangle, polygone...)contrast() (fonction) : Ajuste le contraste d'une image.drop-shadow() (fonction) : Définit l'ombre d'un élément (dimensions, flou, couleur).filter (propriété) : Filtre graphique.grayscale() (fonction) : Convertit une image en nuances de gris (noir et blanc).hue-rotate() (fonction) : Change les couleurs d'une image (rotation des teintes).image() (fonction) : Désigne ou définit une image.image-rendering (propriété) : Mode de mise à l'échelle des images.inset() (fonction) : Définit un rectangle, utilisable pour découper une image.invert() (fonction) : Inverse les couleurs d'une image.opacity() (fonction) : Détermine le degré de transparence d'un élément.saturate() (fonction) : Définit la saturation des couleurs d'une image.sepia() (fonction) : Applique un effet sépia à une image.@counter-style (directive) : Définition d'un compteur personnalisé.counter() (fonction) : Renvoie la valeur actuelle d'un compteur.counters() (fonction) : Renvoie la valeur d'un compteur hiérarchique.list-style (propriété) : Résumé des caractéristiques de listes à puces ou numérotées.list-style-image (propriété) : Image remplaçant les puces.list-style-position (propriété) : Position des marqueurs de listes (puces ou numéros).list-style-type (propriété) : Type de puces ou de numéros.marker-offset (propriété) : Position de la puce ou du numéro.symbols() (fonction) : Définit tous les paramètres d'une numérotationmask (propriété) : Résumé des paramètres de masquage.mask-clip (propriété) : Zone concernée par le masquage.mask-image (propriété) : Image ou le fichier SVG qui sera utilisé comme masquemask-mode (propriété) : Mode de masquage (couche alpha, luminance...)mask-origin (propriété) : Référence pour le positionnement du masque.mask-position (propriété) : Position du masque.mask-repeat (propriété) : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.mask-size (propriété) : Dimensions du masque.direction (propriété) : Sens d'écriture.font-variant-east-asian (propriété) : Typographie spécifique aux caractères chinois ou japonais.line-break (propriété) : Rupture de lignes pour les langues CJK (chinois, japonais, coréen).unicode-bidi (propriété) : Gestion des possibilités d'écriture bidirectionnelle de Unicode.writing-mode (propriété) : Sens et direction d'écriture (horizontale ou verticale).border (propriété) : Résumé des propriétés des bordures.outline (propriété) : Résumé des caractérisitques d'encadrement.outline-color (propriété) : Couleur de l'encadrement.outline-offset (propriété) : Espacement entre contour et élément.outline-style (propriété) : Type de trait de l'encadrement (simple, double, pointillé...).outline-width (propriété) : Epaisseur du trait d'encadrement.bottom (propriété) : Espace par rapport au bas de l'élément.left (propriété) : Espace par rapport au bord du parent.position (propriété) : Mode de positionnement.right (propriété) : Espace par rapport au bord droit.top (propriété) : Espace par rapport au haut.z-index (propriété) : Plan d'affichage (dessus, dessous).@page (directive) : Caractéristiques de la page, à l'impression.bleed (propriété) : color-adjust (propriété) : Autorise ou non le navigateur à optimiser les couleursmarks (propriété) : Traits de coupe et repères d'alignement. orphans (propriété) : Gestion des coupures en bas de page.page-break-after (propriété) : Gestion des sauts de page après.page-break-before (propriété) : Gestion des sauts de page avant.page-break-inside (propriété) : Gestion des sauts de page au milieu.size (propriété) : Dimensions et orientation des pages imprimées.widows (propriété) : Gestion des ruptures en haut de page.circle() (fonction) : Trace un cercle.clip-path (propriété) : Partie de l'élément à afficher, délimitée par une forme géométrique (rectangle, polygone...)drop-shadow() (fonction) : Définit l'ombre d'un élément (dimensions, flou, couleur).ellipse() (fonction) : Définit une ellipse.inset() (fonction) : Définit un rectangle, utilisable pour découper une image.polygon() (fonction) : Définit une forme.rect() (fonction) : Définit un rectangle.shape-outside (propriété) : Définit le contournement du texte pour un élément flottant.azimuth (propriété) : Provenance horizontale du son.cue (propriété) : Résumé des deux propriétés Cue-Before et Cue-After.cue-after (propriété) : Séquence sonore à jouer après la lecture d'un élément.cue-before (propriété) : Séquence sonore à jouer avant la lecture d'un élément.elevation (propriété) : Provenance verticale du son.pause (propriété) : Silence avant et après un élément.pause-after (propriété) : Temps de silence après.pause-before (propriété) : Temps de silence avant.pitch (propriété) : Timbre de voix.pitch-range (propriété) : Variation de timbre de la voix.play-during (propriété) : Son à restituer en fond.richness (propriété) : Portée de la voix.speak (propriété) : Mode de restitution des textes.speak-header (propriété) : Mode de restitution des titres de tableaux.speak-numeral (propriété) : Mode de restitution des nombres.speak-punctuation (propriété) : Mode de restitution de la ponctuation.speech-rate (propriété) : Débit de parole en mots par minutes.stress (propriété) : Inflexion de la voix (calme, précipitée...).voice-family (propriété) : Type de voix (homme, femme, enfant...).volume (propriété) : Volume sonore.border-collapse (propriété) : Mode d'encadrement des cellules de tableau.border-spacing (propriété) : Espacement entre deux traits de cellules adjacentes.caption-side (propriété) : Emplacement du titre des tableaux.empty-cells (propriété) : Mode d'affichage des cellules vides.table-layout (propriété) : Mode de calcul des largeurs de colonnes et de tableaux.vertical-align (propriété) : Alignement vertical.direction (propriété) : Sens d'écriture.hyphens (propriété) : Césure des mots.letter-spacing (propriété) : Espacement des lettres.line-height (propriété) : Hauteur de ligne.text-align (propriété) : Alignement du texte.text-align-last (propriété) : Alignement de la dernière ligne des paragraphes.text-empahsis (propriété) : Mise en exergue du texte.text-emphasis-color (propriété) : Couleur des caractères de mise en exergue.text-emphasis-position (propriété) : Position des caractères de mise en exergue.text-emphasis-style (propriété) : Style de mise en exergue.text-indent (propriété) : Indentation du texte.text-justify (propriété) : Méthode utilisée pour justifier le texte.text-overflow (propriété) : Indication de débordement du texte.unicode-bidi (propriété) : Gestion des possibilités d'écriture bidirectionnelle de Unicode.word-spacing (propriété) : Espacement des mots.writing-mode (propriété) : Sens et direction d'écriture (horizontale ou verticale).backface-visibility (propriété) : Visibilité de la face arrière de l'élément (pendant sa rotation).matrix() (fonction) : Applique une transformation composite à un élément (translations, rotations...)matrix3d() (fonction) : Applique une série de transformations 3D à un élément.perspective (propriété) : Effet de perspective appliqué à un élément ayant subi une transformation 3D.perspective() (fonction) : Définit la hauteur de l'observateur dans le cas d'une transformation 3D.perspective-origin (propriété) : Position de l'observateur dans le cas d'une déformation 3D avec perspective.rotate() (fonction) : Définit une rotation de l'élément en 2D (dans le plan de l'écran).rotate3d() (fonction) : Définit une rotation 3D de l'élément autour des axes X, Y et Z.rotateX() (fonction) : Définit une rotation de l'élément autour de l'axe X (en 3D),rotateY() (fonction) : Définit une rotation 3D de l'élément autour de l'axe Y.rotateZ() (fonction) : Définit une rotation de l'élément autour de l'axe Z.scale() (fonction) : Définit un agrandissement ou une réduction de l'élément.transform (propriété) : Applique une transformation géométrique.transform-origin (propriété) : Point d'origine pour certaines transformations.transform-style (propriété) : Rendu des éléments soumis à une transformation 3D.