Les styles CSS - Tutoriel
CSS
CSS = C
ascading S
tyle S
heets.
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.
Où commencer ?
Pour découvrir les principes de base du CSS, commencez votre lecture par les tutoriels. Vous pouvez aussi accéder directement à :
- La référence des
selectors
, ou despseudo-classes
etpseudo-elements
. - La liste des unités CSS.
- La liste des couleurs CSS.
- La liste des propriétés et de leurs valeurs, ainsi que la liste des fonctions sont accessibles à partir de la table des matières à gauche de l'écran ou du menu "hamburger" sur un mobile.
- Enfin, un index thématique est affiché ci-dessous.
Index thématique des termes CSS.
Animation
Directives :
@keyframes
: Définition d'une animation.
Propriétés :
animation
: Paramètres d'animation.animation-delay
: Temps d'attente avant le démarrage de l'animation.animation-direction
: Sens de l'animation.animation-duration
: Durée d'une animation.animation-fill-mode
: Style de remplacement.animation-iteration-count
: Nombre de répétitions de l'animation.animation-name
: Nom de l'animation.animation-play-state
: État de l'animation.animation-timing-function
: Progression de l'animation.transition
: Effet d'animation simple.transition-delay
: Temps d'attente avant que la transition ne commence.transition-duration
: Durée de la transition.transition-property
: Propriété sur laquelle doit s'appliquer la transition.transition-timing-function
: Progression de la transition.
Fonctions :
cubic-bezier()
: Fonction de Bézier.steps()
: Définit une animation saccadée, pas par pas.
Arrière-plan
Propriétés :
background
: Arrière-plan.background-attachment
: Mode de défilement de l'image d'arrière-plan.background-blend-mode
: Interaction entre couleur et image d'arrière-plan.background-clip
: Interaction entre arrière-plan et bordure.background-color
: Couleur de l'arrière-plan.background-image
: Image d'arrière-plan.background-origin
: Position de l'image d'arrière-plan.background-position
: Emplacement de l'image d'arrière-plan.background-repeat
: Mode de répétition de l'image d'arrière-plan.background-size
: Taille de l'image d'arrière-plan.isolation
: Interaction entre les couches.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity
: Opacité (ou transparence).
Fonctions :
conic-gradient()
: Dégradé conique.linear-gradient()
: Détermine un dégradé de couleur linéaire.radial-gradient()
: Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient()
: Dégradé conique.repeating-linear-gradient()
: Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient()
: Détermine un dégradé de couleur radial avec répétition.
Bordures
Propriétés :
border
: Résumé des propriétés des bordures.border-collapse
: Mode d'encadrement des cellules de tableau.border-color
: Couleur des bordures.border-image
: Résumé des propriétés des bordures réalisées avec des images.border-image-outset
: Débordement de l'image de bordure.border-image-repeat
: Mode de répétition de l'image de bordure.border-image-slice
: Découpage de l'image de bordure.border-image-source
: Image à utiliser pour la bordureborder-image-width
: Épaisseur de la bordure image.border-radius
: Rayon des angles arrondis.border-spacing
: Espacement entre cellules.border-style
: Type de bordure.border-width
: Épaisseur de la bordure.
Dimensions et marges des blocs
Propriétés :
box-sizing
: Mode de calcul des dimensions de blocs.height
: Dimension de l'élément.margin
: Résumé des quatre marges.margin-bottom
: Marge du bas.margin-left
: Marge de gauche.margin-right
: Marge de droite.margin-top
: Marge du haut.max-height
: Hauteur maxi.max-width
: Largeur maxi.min-height
: Hauteur mini.min-width
: Largeur mini.padding
: Marges intérieures des quatre cotés.width
: Largeur de l'élément.
Césure et coupure des mots
Propriétés :
hyphens
: Césure des mots.overflow-wrap
: Coupure des mots.white-space
: Gestion des espaces multiples et des retours chariot.word-break
: Coupure des mots longs.word-wrap
: Coupure des mots.
Fonctions de calcul
Fonctions :
abs()
: Valeur absolue.acos()
: Calcule l'arc-cosinus.asin()
: Calcule l'arc-sinus.atan()
: Calcule l'arc-tangente d'un angle.atan2()
: Calcule l'arc-tangente.attr()
: Valeur d'un attribut.calc()
: Calcule une valeurclamp()
: Valeur entre deux limites.cos()
: Cosinus d'un angleexp()
: Exponentielle d'un nombre.hypot()
: Calcule l'hypoténuse.log()
: Logarithme d'un nombre.max()
: Détermine la valeur la plus petite parmi une série de valeurs.min()
: Valeur mini.minmax()
: Valeur comprise dans une fourchettemod()
: Reste de la division.pow()
: Mises à l'exposant.rem()
: Reste de la division.round()
: Arrondi d'un nombre.sign()
: Signe d'un nombre.sin()
: Sinus d'un angle.sqrt()
: Racine carrée.tan()
: Tangente d'un angle.var()
: Valeur d'une variable.
Structuration du code
Couleurs
Propriétés :
background-color
: Couleur de l'arrière-plan.border-color
: Couleur des bordures.caret-color
: Couleur du curseur de texte.color
: Couleur du texte.column-rule-color
: Couleur des traits de séparation de colonnes.outline-color
: Couleur de l'encadrement.text-decoration-color
: Couleur de la décoration.text-emphasis-color
: Couleur de la mise en exergue.
Fonctions :
hsl()
: Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.hsla()
: Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.hue-rotate()
: Change les couleurs d'une image (rotation des teintes).hwb()
: Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.rgb()
: Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.rgba()
: Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.
Colonnes multiples
Propriétés :
break-after
: Interdit ou impose des sauts (page, colonne...) après l'élément.break-before
: Interdit ou impose des sauts (page, colonne...) avant l'élément.break-inside
: Gestion des sauts de colonne ou de page.column-count
: Nombre de colonnes.column-fill
: Répartition du contenu entre les colonnes.column-gap
: Espacement entre les colonnes.column-rule
: Trait de séparation entre les colonnes.column-rule-color
: Couleur des traits de séparation de colonnes.column-rule-style
: Type de trait entre les colonnes.column-rule-width
: Épaisseur du trait entre les colonnes.column-span
: Chevauchement sur plusieurs colonnes.column-width
: Largeur des colonnes.columns
: Largeur et nombre de colonnes.orphans
: Coupures en bas de page ou de colonne.widows
: Rupture en haute de page ou de colonne.
Ajout de contenu
Directives :
@charset
: Jeu de caractères de la feuille de styles.@counter-style
: Compteur personnalisé.
Propriétés :
content
: Contenu à ajouter.counter-increment
: Incrément d'un compteur.counter-reset
: Initialisation d'un compteur.hanging-punctuation
: Ponctuation suspendue.quotes
: Caractères utilisés pour les guillemets.
Fonctions :
attr()
: Valeur d'un attribut.counter()
: Valeur d'un compteur.counters()
: Valeur d'un compteur hiérarchique.
Affichage/masquage d'éléments
Propriétés :
display
: Nature de l'élément.visibility
: Affichage ou masquage.
Flex-box
Propriétés :
align-content
: Disposition verticale.align-items
: Alignement vertical.align-self
: Alignement vertical individuel.display
: Nature de l'élément.flex
: Caractéristiques du flex-box.flex-basis
: Dimension d'un élément d'un flex-box.flex-direction
: Axes d'un flex-box.flex-flow
: Disposition des éléments d'un flex-box.flex-grow
: Agrandissement d'un élément d'un flex-box.flex-shrink
: Réduction de la taille d'un élément de flex-box.flex-wrap
: Retours à la ligne dans un flex-box.justify-content
: Positionnement dans un flex-box ou une grille.order
: Ordre des éléments dans un flex-box.place-content
: Disposition des éléments
Éléments flottants (côte à côte)
Propriétés :
clear
: Côtoiement des éléments.clip-path
: Partie visible de l'élément.float
: Positionnement relatif des éléments les uns par rapport aux autres.shape-outside
: Définit le contournement du texte pour un élément flottant.
Polices et caractères
Directives :
@charset
: Jeu de caractères de la feuille de styles.@font-face
: Police de caractères téléchargeable.@font-feature-values
: Variantes typographiques.
Propriétés :
font
: Police de caractères.font-family
: Police de caractères.font-feature-settings
: Fonctionnalités spécifiques aux polices OTF, WOFF, etc.font-kerning
: Crénage des caractères.font-optical-sizing
: Optimisation visuelle des caractères.font-palette
: Palette de couleurs pour les polices.font-size
: Taille des caractères.font-size-adjust
: Coefficient d'aspect de la police.font-stretch
: Étirement des caractères.font-style
: Italique.font-synthesis
: Simulation des styles manquants.font-synthesis-style
: Autorise la synthèse des caractères italiques.font-synthesis-weight
: Autorise la synthèse des caractères gras.font-variant
: Attributs typographiques évolués.font-variant-alternates
: Substitution de caractères.font-variant-caps
: Capitalisation des caractères.font-variant-east-asian
: Typographie spécifique aux caractères CJK.font-variant-ligatures
: Ligature des caractères.font-variant-numeric
: Mode d'affichage des nombres.font-variant-position
: Exposant ou indicefont-weight
: Graisse des caractères.text-decoration
: Soulignement ou rayure du texte.text-decoration-color
: Couleur de la décoration.text-decoration-line
: Type de décoration : souligné, barré, etc.text-decoration-style
: Type de trait de décoration.text-shadow
: Ombrage du texte.text-transform
: Casse du texte.
Grilles
Propriétés :
align-content
: Disposition verticale.align-items
: Alignement vertical.align-self
: Alignement vertical individuel.grid
: Caractéristiques d'une grille.grid-area
: Positionne un élément dans une zone nommée de la grille.grid-auto-columns
: Mode de calcul des colonnes 'auto' dans une grille.grid-auto-flow
: Mode de calcul de l'emplacement des éléments dans la grille.grid-auto-rows
: Mode de calcul de la hauteur 'auto' des lignes dans une grille.grid-column
: Numéro de colonne(s) d'un élément dans une grille.grid-column-end
: Numéro de la colonne de fin d'un élément dans une grille.grid-column-gap
: Espacement des colonnes.grid-column-start
: Numéro de la colonne de début d'un élément dans une grille.grid-gap
: Espacements dans une grille.grid-row
: Numéro des lignes d'un élément dans une grille.grid-row-end
: Numéro de la ligne de fin d'un élément dans une grille.grid-row-gap
: Espacement des lignes.grid-row-start
: Numéro de la ligne de départ d'un élément dans une grille.grid-template
: Largeur des colonnes et hauteur des lignes d'une grille.grid-template-areas
: Définition des zones dans une grillegrid-template-columns
: Colonnes d'une grille.grid-template-rows
: Lignes d'une grille.justify-content
: Positionnement dans un flex-box ou une grille.justify-items
: Disposition horizontale dans un flex-box ou une grille.justify-self
: Position horizontale d'un élément dans un flex-box ou une grille.place-content
: Disposition des éléments
Fonctions :
Images et filtres
Propriétés :
backdrop-filter
: Filtre d'arrière-plan.background-blend-mode
: Interaction entre couleur et image d'arrière-plan.clip
: Partie visible de l'élément.clip-path
: Partie visible de l'élément.filter
: Filtre graphique.image-rendering
: Mode de mise à l'échelle des images.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.
Fonctions :
blur()
: Effet de flou.brightness()
: Luminosité d'un élément.contrast()
: Contraste.drop-shadow()
: Définit l'ombre d'un élément (dimensions, flou, couleur).grayscale()
: Convertit une image en nuances de gris (noir et blanc).hue-rotate()
: Change les couleurs d'une image (rotation des teintes).image()
: Désigne ou définit une image.inset()
: Définit un rectangle, utilisable pour découper une image.invert()
: Inverse les couleurs d'une image.opacity()
: Détermine le degré de transparence d'un élément.saturate()
: Définit la saturation des couleurs d'une image.sepia()
: Applique un effet sépia à une image.
Listes à puces ou à numéros
Directives :
@counter-style
: Compteur personnalisé.
Propriétés :
counter-increment
: Incrément d'un compteur.counter-reset
: Initialisation d'un compteur.list-style
: Formatage des listes.list-style-image
: Image remplaçant les puces.list-style-position
: Emplacement des puces ou numéros.list-style-type
: Type de puces ou de numérotation.marker-offset
: Position des puces ou numéros.marker-side
: Côté où se positionne le marqueur.
Fonctions :
counter()
: Valeur d'un compteur.counters()
: Valeur d'un compteur hiérarchique.symbols()
: Définit tous les paramètres d'une numérotation
Masquage
Propriétés :
mask
: Résumé des paramètres de masquage.mask-clip
: Définit la zone concernée par le masquage.mask-image
: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.mask-mode
: Définit le mode de masquage (couche alpha, luminance...)mask-origin
: Définit la référence pour le positionnement du masque.mask-position
: Position du masque.mask-repeat
: Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.mask-size
: Fixe les dimensions du masque.
Langues non latines : arabes, chinoises, japonaises ou coréennes
Propriétés :
direction
: Sens d'écriture.font-variant-east-asian
: Typographie spécifique aux caractères CJK.line-break
: Rupture de lignes pour les langues CJK (chinois, japonais, coréen).unicode-bidi
: Écriture bidirectionnelle.writing-mode
: Sens et direction d'écriture (horizontale ou verticale).
Contours
Propriétés :
border
: Résumé des propriétés des bordures.outline
: Encadrement.outline-color
: Couleur de l'encadrement.outline-offset
: Espacement entre contour et élément.outline-style
: Type de trait des contours.outline-width
: Épaisseur du trait d'encadrement.
Blocs positionnés
Impression
Directives :
@page
: Page imprimée.
Propriétés :
bleed
:break-after
: Interdit ou impose des sauts (page, colonne...) après l'élément.break-before
: Interdit ou impose des sauts (page, colonne...) avant l'élément.break-inside
: Gestion des sauts de colonne ou de page.color-adjust
: Optimisation des couleurs.marks
: Traits de coupe et repères d'alignement.orphans
: Coupures en bas de page ou de colonne.page-break-after
: Saut de page après l'élément.page-break-before
: Saut de page avant l'élément.page-break-inside
: Sauts de page au milieu de l'élément.size
: Dimensions et orientation des pages imprimées.widows
: Rupture en haute de page ou de colonne.
Formes géométriques
Propriétés :
clip-path
: Partie visible de l'élément.shape-outside
: Définit le contournement du texte pour un élément flottant.
Fonctions :
Restitution sonore
Propriétés :
azimuth
: Provenance horizontale du son.cue
: Son avant et après.cue-after
: Séquence sonore à jouer après la lecture d'un élément.cue-before
: Séquence sonore à jouer avant la lecture d'un élément.elevation
: Provenance verticale du son.pause
: Silence pendant la restitution sonorepause-after
: Silence après la lecture de l'élément (restitution sonore)pause-before
: Silence avant la lecture de l'élément (restitution sonore)pitch
: Timbre de voix.pitch-range
: Variation de timbre de la voix.play-during
: Son à restituer en fond.richness
: Portée de la voix.speak
: Lecture de l'élément ou nonspeak-header
: Mode de restitution des titres de tableaux.speak-numeral
: Mode de restitution des nombres.speak-punctuation
: Mode de restitution de la ponctuation.speech-rate
: Débit de parole en mots par minutes.stress
: Inflexion de la voix (calme, précipitée...).voice-family
: Type de voix.volume
: Volume sonore.
Propriétés spécifiques aux tableaux
Propriétés :
border-collapse
: Mode d'encadrement des cellules de tableau.border-spacing
: Espacement entre cellules.caption-side
: Emplacement du titre pour un tableau.empty-cells
: Mode d'affichage des cellules vides.table-layout
: Largeur des colonnes.vertical-align
: Alignement vertical.
Blocs de texte
Propriétés :
direction
: Sens d'écriture.hyphens
: Césure des mots.letter-spacing
: Espacement des lettres.line-height
: Hauteur de ligne.text-align
: Alignement du texte.text-align-last
: Alignement dernière ligne.text-emphasis-color
: Couleur de la mise en exergue.text-emphasis-position
: Position des caractères de mise en exergue.text-emphasis-style
: Style de mise en exergue.text-indent
: Indentation.text-justify
: Méthode utilisée pour justifier le texte.text-overflow
: Indicateur de débordement.unicode-bidi
: Écriture bidirectionnelle.word-spacing
: Espacement des mots.writing-mode
: Sens et direction d'écriture (horizontale ou verticale).
Transformations géométriques
Propriétés :
backface-visibility
: Visibilité de la face arrière.perspective
: Effet de perspective.perspective-origin
: Position de l'observateur (transformations 3D).rotate
: Rotation de l'élément.scale
: Mise à l'échelle.transform
: Applique une transformation géométrique.transform-origin
: Point d'origine pour certaines transformations.transform-style
: Rendu des éléments soumis à une transformation 3D.translate
: Translation d'un élément.
Fonctions :
matrix()
: Applique une transformation composite à un élément (translations, rotations...)matrix3d()
: Applique une série de transformations 3D à un élément.perspective()
: Définit la hauteur de l'observateur dans le cas d'une transformation 3D.rotate()
: Rotation 2d.rotate3d()
: Rotation 3d.rotateX()
: Rotation autour de l'axe horizontal.rotateY()
: Rotation autour de l'axe vertical.rotateZ()
: Rotation 2d.scale()
: Réduction ou agrandissement.scale3d()
: Définit une mise à l'échelle en 3D.scaleX()
: Définit une mise à l'échelle suivant l'axe X.scaleY()
: Définit une mise à l'échelle suivant l'axe Y.scaleZ()
: Définit une mise à l'échelle suivant l'axe Z.skew()
: Définit une inclinaison de l'élément suivant les axes X et/ou Y.skewX()
: Définit une inclinaison de l'élément suivant l'axe X.skewY()
: Définit une inclinaison de l'élément suivant l'axe Y.translate()
: Translation dans le plan 2D.translate3d()
: Translation en 3DtranslateX()
: Translation horizontale.translateY()
: Translation verticale.translateZ()
: Translation en 3d.
Fonctionnalités spécifiques à SVG.
Propriétés :
color-interpolation-filters
: Espace de couleurs pour les effets de filrage.