displayTata Letak
Defines how element is rendered in the document.
block | inline | flex | grid | inline-flex | inline-grid | none | contentspositionTata Letak
Specifies positioning method.
static | relative | absolute | fixed | stickytop / right / bottom / leftTata Letak
Offset for positioned elements.
<length> | <percentage> | autofloatTata Letak
Moves element to left/right of container.
left | right | none | inline-start | inline-endclearTata Letak
Specifies what happens with the element next to a floated element.
none | left | right | both | inline-start | inline-endz-indexTata Letak
Sets stacking order of elements.
auto | <integer>overflowTata Letak
Controls content that overflows element box.
visible | hidden | scroll | auto | clipwidth / heightModel Kotak
Sets element dimensions.
<length> | <percentage> | auto | min-content | max-content | fit-contentmax-width / max-heightModel Kotak
Sets maximum element dimensions.
<length> | <percentage> | none | min-content | max-contentmin-width / min-heightModel Kotak
Sets minimum element dimensions.
<length> | <percentage> | auto | min-content | max-contentmarginModel Kotak
Space outside the element border.
<length> | <percentage> | auto (shorthand: top right bottom left)paddingModel Kotak
Space between content and border.
<length> | <percentage> (shorthand: top right bottom left)borderModel Kotak
Shorthand for border-width, border-style, border-color.
<border-width> || <border-style> || <color>border-radiusModel Kotak
Rounds corners of element border box.
<length> | <percentage> (1-4 values for corners)box-sizingModel Kotak
How width/height is calculated.
content-box | border-boxbox-shadowModel Kotak
Adds shadow effects around element frame.
<offset-x> <offset-y> <blur> <spread> <color> | inset | noneflex-directionFlexbox
Sets main axis of flex container.
row | row-reverse | column | column-reverseflex-wrapFlexbox
Whether flex items wrap onto multiple lines.
nowrap | wrap | wrap-reversejustify-contentFlexbox
Alignment along main axis.
flex-start | flex-end | center | space-between | space-around | space-evenlyalign-itemsFlexbox
Default alignment along cross axis.
stretch | flex-start | flex-end | center | baselinealign-contentFlexbox
Multi-line flex container alignment.
flex-start | flex-end | center | space-between | space-around | stretchflexFlexbox
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-fitgrid-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-sizeTipografi
Size of the font.
<length> | <percentage> | xx-small...xx-large | smaller | largerfont-familyTipografi
Prioritized list of font family names.
<family-name> | <generic-family> (comma-separated list)font-weightTipografi
Weight/boldness of the font.
normal | bold | bolder | lighter | 100–900font-styleTipografi
Italic or oblique font.
normal | italic | obliqueline-heightTipografi
Height of a line box.
normal | <number> | <length> | <percentage>text-alignTipografi
Horizontal alignment of text.
left | right | center | justify | start | endtext-decorationTipografi
Decorative lines on text.
none | underline | overline | line-through | blinktext-transformTipografi
Capitalization of text.
none | uppercase | lowercase | capitalizeletter-spacingTipografi
Space between characters.
normal | <length>word-spacingTipografi
Space between words.
normal | <length>colorVisual
Foreground color of text and text decorations.
<color> (name, hex, rgb(), hsl(), oklch())backgroundVisual
Shorthand for all background properties.
<color> | <image> | <position> / <size> <repeat> <attachment>background-colorVisual
Background color of element.
<color> | transparentopacityVisual
Transparency of element (0–1).
<number> (0 = transparent, 1 = opaque)visibilityVisual
Shows or hides element without changing layout.
visible | hidden | collapsetransitionAnimasi
Shorthand for transition properties.
<property> <duration> <easing> <delay>animationAnimasi
Shorthand for animation properties.
<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>transformAnimasi
Applies 2D/3D transforms.
none | translate() rotate() scale() skew() matrix()will-changeAnimasi
Hints browser about expected changes for optimization.
auto | scroll-position | contents | transform | opacitycursorUI
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 | painteduser-selectUI
Controls if text can be selected.
auto | none | text | all | containoutlineUI
Outline drawn around element outside border.
<outline-width> || <outline-style> || <color> | noneresizeUI
Whether/how user can resize element.
none | both | horizontal | vertical