TL
Tool Lab
💰Faire un don
💰Faire un don

CSS Properties Reference

Comprehensive CSS property reference — flexbox, grid, typography, animation, and more.

52 propriétés

displayDisposition

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionDisposition

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftDisposition

Offset for positioned elements.

<length> | <percentage> | auto
floatDisposition

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearDisposition

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-indexDisposition

Sets stacking order of elements.

auto | <integer>
overflowDisposition

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightModèle de boîte

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightModèle de boîte

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightModèle de boîte

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginModèle de boîte

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingModèle de boîte

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderModèle de boîte

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radiusModèle de boîte

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingModèle de boîte

How width/height is calculated.

content-box | border-box
box-shadowModèle de boîte

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-directionFlexbox

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrapFlexbox

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-contentFlexbox

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsFlexbox

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-contentFlexbox

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flexFlexbox

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gapFlexbox

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columnsGrid

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rowsGrid

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-columnGrid

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-rowGrid

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-areaGrid

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-sizeTypographie

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-familyTypographie

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weightTypographie

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-styleTypographie

Italic or oblique font.

normal | italic | oblique
line-heightTypographie

Height of a line box.

normal | <number> | <length> | <percentage>
text-alignTypographie

Horizontal alignment of text.

left | right | center | justify | start | end
text-decorationTypographie

Decorative lines on text.

none | underline | overline | line-through | blink
text-transformTypographie

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingTypographie

Space between characters.

normal | <length>
word-spacingTypographie

Space between words.

normal | <length>
colorVisuel

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundVisuel

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorVisuel

Background color of element.

<color> | transparent
opacityVisuel

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityVisuel

Shows or hides element without changing layout.

visible | hidden | collapse
transitionAnimation

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationAnimation

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transformAnimation

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-changeAnimation

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

À propos de cet outil

Cette référence couvre les propriétés CSS les plus utilisées dans huit catégories : Disposition, Modèle de boîte, Flexbox, Grid, Typographie, Visuel, Animation et interaction UI.

Utilisez la zone de recherche pour filtrer par nom de propriété, description ou valeurs acceptées. Utilisez le filtre de catégorie pour parcourir un groupe spécifique.

Comment utiliser

  1. Saisissez un nom de propriété ou un mot-clé dans la zone de recherche pour filtrer la liste.
  2. Sélectionnez une catégorie dans le menu déroulant pour afficher uniquement ce groupe.
  3. Chaque ligne affiche le nom de la propriété, l'étiquette de catégorie, la description et les valeurs acceptées.

Cas d'utilisation

Les développeurs front-end recherchent des noms de propriétés et des valeurs valides pendant le développement. Les étudiants apprenant CSS utilisent la référence pour explorer les propriétés disponibles.

Questions fréquentes

  • Toutes les propriétés CSS sont-elles incluses ?Non. Cette référence couvre uniquement les propriétés les plus utilisées. Les propriétés rares ou expérimentales sont omises.
  • Les propriétés avec préfixes vendeur sont-elles listées ?Non. Seules les propriétés standard sans préfixe sont listées. Les navigateurs modernes les prennent en charge sans préfixes vendeur.