Chapter 26: Complete CSS Property Cheat Sheet & Live Index
The ultimate CSS3 Properties Reference. Filter, search, and master all CSS properties with detailed definitions, syntax specs, category filters, alphabetical navigation, and beginner-friendly interactive "Try It Yourself" playground demos.
Showing 0
properties
/
Quick Jump:
Active Filters:
🔎
No matching CSS properties found
We couldn't find any CSS property matching your query or selected filters. Try clearing your search or switching categories.
26.1 Complete Master CSS Properties Index
| Property / At-Rule | Description / Usage | Category |
|---|---|---|
accent-color |
Specifies an accent color for user-interface controls (checkboxes, radios, range sliders). | UI & Effects |
align-content |
Specifies alignment between lines inside a flexible container when items do not use all space. | Flexbox & Grid |
align-items |
Specifies default alignment for items inside a flexible container along the cross axis. | Flexbox & Grid |
align-self |
Specifies alignment for selected individual items inside a flexible container. | Flexbox & Grid |
all |
Resets all properties to initial or inherit values (except unicode-bidi and direction). | Positioning & Box |
animation |
Shorthand property for all animation-* properties (name, duration, timing, delay, count). | Animation & Motion |
animation-delay |
Specifies a delay before starting an animation cycle. | Animation & Motion |
animation-direction |
Specifies whether animation plays forward, backward, or in alternate cycles. | Animation & Motion |
animation-duration |
Specifies how many seconds or milliseconds an animation takes to complete one cycle. | Animation & Motion |
animation-fill-mode |
Specifies target styles applied before animation starts or after it finishes. | Animation & Motion |
animation-iteration-count |
Specifies the number of times an animation sequence should repeat. | Animation & Motion |
animation-name |
Specifies the target name of the @keyframes animation sequence. | Animation & Motion |
animation-play-state |
Specifies whether the animation is running or paused. | Animation & Motion |
animation-timing-function |
Specifies the speed curve of an animation (ease, linear, cubic-bezier). | Animation & Motion |
aspect-ratio |
Specifies preferred width-to-height aspect ratio for elements (e.g. 16/9, 1/1). | Positioning & Box |
backdrop-filter |
Defines graphical effects (blur, contrast) to the background area behind a translucent element. | UI & Effects |
backface-visibility |
Defines whether the back face of an element is visible when rotated toward the user in 3D. | Animation & Motion |
background |
Shorthand property for setting all background properties in one declaration. | Backgrounds & Borders |
background-attachment |
Sets whether a background image scrolls with page content or remains fixed. | Backgrounds & Borders |
background-blend-mode |
Specifies blending mode of background color and image layers. | Backgrounds & Borders |
background-clip |
Defines how far background color or image extends (border-box, padding-box, text). | Backgrounds & Borders |
background-color |
Specifies the solid background color of an element. | Backgrounds & Borders |
background-image |
Specifies one or more background images or gradients for an element. | Backgrounds & Borders |
background-origin |
Specifies positioning origin area of a background image. | Backgrounds & Borders |
background-position |
Specifies the starting position of a background image. | Backgrounds & Borders |
background-position-x |
Specifies the position of a background image on the horizontal x-axis. | Backgrounds & Borders |
background-position-y |
Specifies the position of a background image on the vertical y-axis. | Backgrounds & Borders |
background-repeat |
Sets if and how a background image will repeat across axes. | Backgrounds & Borders |
background-size |
Specifies background image sizing (cover, contain, or explicit dimensions). | Backgrounds & Borders |
block-size |
Logical property specifying element size in the block direction (height in horizontal mode). | Positioning & Box |
border |
Shorthand property for border-width, border-style, and border-color. | Backgrounds & Borders |
border-block |
Logical shorthand property for border-block-width, border-block-style, and border-block-color. | Backgrounds & Borders |
border-block-color |
Sets the color of borders at start and end in the block direction. | Backgrounds & Borders |
border-block-end |
Shorthand property for border-block-end-width, border-block-end-style, and border-block-end-color. | Backgrounds & Borders |
border-block-end-color |
Sets the color of the border at the end in the block direction. | Backgrounds & Borders |
border-block-end-style |
Sets the style of the border at the end in the block direction. | Backgrounds & Borders |
border-block-end-width |
Sets the width of the border at the end in the block direction. | Backgrounds & Borders |
border-block-start |
Shorthand property for border-block-start-width, border-block-start-style, and border-block-start-color. | Backgrounds & Borders |
border-block-start-color |
Sets the color of the border at the start in the block direction. | Backgrounds & Borders |
border-block-start-style |
Sets the style of the border at the start in the block direction. | Backgrounds & Borders |
border-block-start-width |
Sets the width of the border at the start in the block direction. | Backgrounds & Borders |
border-block-style |
Sets the style of borders at start and end in the block direction. | Backgrounds & Borders |
border-block-width |
Sets the width of borders at start and end in the block direction. | Backgrounds & Borders |
border-bottom |
Shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color. | Backgrounds & Borders |
border-bottom-color |
Sets the color of the bottom border. | Backgrounds & Borders |
border-bottom-left-radius |
Defines the radius of the border of the bottom-left corner. | Backgrounds & Borders |
border-bottom-right-radius |
Defines the radius of the border of the bottom-right corner. | Backgrounds & Borders |
border-bottom-style |
Sets the style of the bottom border. | Backgrounds & Borders |
border-bottom-width |
Sets the width of the bottom border. | Backgrounds & Borders |
border-collapse |
Sets whether table borders collapse into a single border or remain separated. | Positioning & Box |
border-color |
Sets the color of the four borders. | Backgrounds & Borders |
border-end-end-radius |
Logical property setting radius of the corner between block-end and inline-end sides. | Backgrounds & Borders |
border-end-start-radius |
Logical property setting radius of the corner between block-end and inline-start sides. | Backgrounds & Borders |
border-image |
Shorthand property for all border-image-* properties. | Backgrounds & Borders |
border-image-outset |
Specifies the amount by which the border image area extends beyond the border box. | Backgrounds & Borders |
border-image-repeat |
Specifies whether the border image should be repeated, rounded, or stretched. | Backgrounds & Borders |
border-image-slice |
Specifies how to slice the border image into regions. | Backgrounds & Borders |
border-image-source |
Specifies the path or gradient to be used as a border image. | Backgrounds & Borders |
border-image-width |
Specifies the width of the border image. | Backgrounds & Borders |
border-inline |
Logical shorthand property for border-inline-width, border-inline-style, and border-inline-color. | Backgrounds & Borders |
border-inline-color |
Sets the color of borders at start and end in the inline direction. | Backgrounds & Borders |
border-inline-end |
Logical shorthand property for border-inline-end-width, border-inline-end-style, and border-inline-end-color. | Backgrounds & Borders |
border-inline-end-color |
Sets the color of the border at the end in the inline direction. | Backgrounds & Borders |
border-inline-end-style |
Sets the style of the border at the end in the inline direction. | Backgrounds & Borders |
border-inline-end-width |
Sets the width of the border at the end in the inline direction. | Backgrounds & Borders |
border-inline-start |
Logical shorthand property for border-inline-start-width, border-inline-start-style, and border-inline-start-color. | Backgrounds & Borders |
border-inline-start-color |
Sets the color of the border at the start in the inline direction. | Backgrounds & Borders |
border-inline-start-style |
Sets the style of the border at the start in the inline direction. | Backgrounds & Borders |
border-inline-start-width |
Sets the width of the border at the start in the inline direction. | Backgrounds & Borders |
border-inline-style |
Sets the style of the borders at start and end in the inline direction. | Backgrounds & Borders |
border-inline-width |
Sets the width of the borders at start and end in the inline direction. | Backgrounds & Borders |
border-left |
Shorthand property for border-left-width, border-left-style, and border-left-color. | Backgrounds & Borders |
border-left-color |
Sets the color of the left border. | Backgrounds & Borders |
border-left-style |
Sets the style of the left border. | Backgrounds & Borders |
border-left-width |
Sets the width of the left border. | Backgrounds & Borders |
border-radius |
Shorthand for setting rounded corner radii on all four corners of an element. | Backgrounds & Borders |
border-right |
Shorthand property for border-right-width, border-right-style, and border-right-color. | Backgrounds & Borders |
border-right-color |
Sets the color of the right border. | Backgrounds & Borders |
border-right-style |
Sets the style of the right border. | Backgrounds & Borders |
border-right-width |
Sets the width of the right border. | Backgrounds & Borders |
border-spacing |
Sets the distance between borders of adjacent table cells. | Positioning & Box |
border-start-end-radius |
Logical property setting corner radius between block-start and inline-end sides. | Backgrounds & Borders |
border-start-start-radius |
Logical property setting corner radius between block-start and inline-start sides. | Backgrounds & Borders |
border-style |
Sets the style of the four borders (solid, dashed, dotted, double, none). | Backgrounds & Borders |
border-top |
Shorthand property for border-top-width, border-top-style, and border-top-color. | Backgrounds & Borders |
border-top-color |
Sets the color of the top border. | Backgrounds & Borders |
border-top-left-radius |
Defines the radius of the border of the top-left corner. | Backgrounds & Borders |
border-top-right-radius |
Defines the radius of the border of the top-right corner. | Backgrounds & Borders |
border-top-style |
Sets the style of the top border. | Backgrounds & Borders |
border-top-width |
Sets the width of the top border. | Backgrounds & Borders |
border-width |
Sets the width of the four borders. | Backgrounds & Borders |
bottom |
Sets element vertical offset position relative to parent bottom boundary. | Positioning & Box |
box-decoration-break |
Sets behavior of background and border of an element at page-break or line-break. | UI & Effects |
box-reflect |
Creates a visual reflection of an element box along a given direction. | UI & Effects |
box-shadow |
Attaches outer or inset shadow drop effects to an element box. | UI & Effects |
box-sizing |
Defines whether element width and height include padding and borders (border-box vs content-box). | Positioning & Box |
break-after |
Specifies whether a page-, column-, or region-break should occur after element. | Positioning & Box |
break-before |
Specifies whether a page-, column-, or region-break should occur before element. | Positioning & Box |
break-inside |
Specifies whether a page-, column-, or region-break should occur inside element. | Positioning & Box |
caption-side |
Specifies the placement of a table caption (top, bottom). | Positioning & Box |
caret-color |
Specifies the color of the text insertion cursor (caret) in inputs and textareas. | UI & Effects |
@charset |
Specifies the character encoding used in the style sheet (e.g. "UTF-8"). | Fonts & Typography |
clear |
Specifies whether an element is moved below preceding floating elements. | Positioning & Box |
clip |
Deprecated in favor of clip-path. Clips an absolutely positioned element. | UI & Effects |
clip-path |
Clips an element to a geometric shape (circle, polygon, inset) or SVG path. | UI & Effects |
color |
Sets the foreground color of text content. | Fonts & Typography |
color-scheme |
Indicates which operating system color scheme (light, dark) an element should render with. | UI & Effects |
column-count |
Specifies the number of columns an element should be divided into in multi-column layouts. | Flexbox & Grid |
column-fill |
Specifies how to fill columns (auto, balance). | Flexbox & Grid |
column-gap |
Specifies the gap between columns in multi-column, flexbox, or grid layouts. | Flexbox & Grid |
column-rule |
Shorthand property for column-rule-width, column-rule-style, and column-rule-color. | Flexbox & Grid |
column-rule-color |
Specifies the color of the rule line between columns. | Flexbox & Grid |
column-rule-style |
Specifies the style of the rule line between columns. | Flexbox & Grid |
column-rule-width |
Specifies the width of the rule line between columns. | Flexbox & Grid |
column-span |
Specifies how many columns an element should span across (none, all). | Flexbox & Grid |
column-width |
Specifies the ideal column width in a multi-column layout. | Flexbox & Grid |
columns |
Shorthand property for column-width and column-count. | Flexbox & Grid |
@container |
Defines styles for elements depending on parent container dimensions or styles. | Flexbox & Grid |
content |
Used with ::before and ::after pseudo-elements to insert generated content into DOM. | Fonts & Typography |
counter-increment |
Increases or decreases the value of one or more CSS counters. | Fonts & Typography |
counter-reset |
Creates or resets one or more CSS counters. | Fonts & Typography |
counter-set |
Sets a CSS counter to a given value. | Fonts & Typography |
@counter-style |
Lets developers define custom list counter styles. | Fonts & Typography |
cursor |
Specifies the mouse cursor pointer type to be displayed when hovering over an element. | UI & Effects |
direction |
Specifies text direction and writing direction (ltr, rtl). | Fonts & Typography |
display |
Specifies inner and outer display rendering behavior (block, flex, grid, inline-block, none). | Flexbox & Grid |
empty-cells |
Specifies whether or not to display borders and background on empty table cells. | Positioning & Box |
filter |
Defines graphical effects (blur, brightness, contrast, drop-shadow, grayscale) on an element. | UI & Effects |
flex |
Shorthand property for flex-grow, flex-shrink, and flex-basis. | Flexbox & Grid |
flex-basis |
Specifies initial main-axis size length of a flexible item. | Flexbox & Grid |
flex-direction |
Specifies main axis direction of flexible items (row, column, row-reverse, column-reverse). | Flexbox & Grid |
flex-flow |
Shorthand property for flex-direction and flex-wrap. | Flexbox & Grid |
flex-grow |
Specifies flex grow factor relative to remaining space in container. | Flexbox & Grid |
flex-shrink |
Specifies flex shrink factor relative to other items when space is limited. | Flexbox & Grid |
flex-wrap |
Specifies whether flexible items should wrap onto multiple lines (nowrap, wrap, wrap-reverse). | Flexbox & Grid |
float |
Specifies whether an element floats to the left, right, or not at all. | Positioning & Box |
font |
Shorthand property for font-style, font-variant, font-weight, font-size/line-height, and font-family. | Fonts & Typography |
@font-face |
Specifies custom font files to download and render text. | Fonts & Typography |
font-family |
Specifies font family stack for text elements. | Fonts & Typography |
font-feature-settings |
Allows control over advanced typographic features in OpenType fonts. | Fonts & Typography |
font-kerning |
Controls usage of kerning character spacing information in fonts. | Fonts & Typography |
font-language-override |
Controls usage of language-specific glyphs in a typeface. | Fonts & Typography |
@font-palette-values |
Allows customizing default color palette values of a font. | Fonts & Typography |
font-size |
Specifies font size dimensions of text. | Fonts & Typography |
font-size-adjust |
Preserves text readability when a fallback font occurs. | Fonts & Typography |
font-stretch |
Selects a normal, condensed, or expanded face from a font family. | Fonts & Typography |
font-style |
Specifies font style for text (normal, italic, oblique). | Fonts & Typography |
font-synthesis |
Controls which missing typefaces (bold or italic) may be synthesized by browser. | Fonts & Typography |
font-variant |
Shorthand for all font-variant-* properties (small-caps, ligatures). | Fonts & Typography |
font-variant-alternates |
Controls usage of alternate glyphs in fonts. | Fonts & Typography |
font-variant-caps |
Controls usage of alternate glyphs for capital letters (small-caps, all-small-caps). | Fonts & Typography |
font-variant-east-asian |
Controls usage of alternate glyphs for East Asian scripts. | Fonts & Typography |
font-variant-ligatures |
Controls which ligatures and contextual forms are used in text content. | Fonts & Typography |
font-variant-numeric |
Controls usage of alternate glyphs for numbers, fractions, and ordinal markers. | Fonts & Typography |
font-variant-position |
Controls usage of subscript or superscript smaller glyph positioning. | Fonts & Typography |
font-weight |
Sets boldness weight of font glyphs (100 to 900, bold, normal). | Fonts & Typography |
gap |
Shorthand specifying gutters between flex or grid rows and columns. | Flexbox & Grid |
grid |
Shorthand property for setting all grid container template and auto track properties. | Flexbox & Grid |
grid-area |
Specifies grid item area name or shorthand for start/end row/column placements. | Flexbox & Grid |
grid-auto-columns |
Specifies default size for implicitly created grid column tracks. | Flexbox & Grid |
grid-auto-flow |
Specifies how auto-placed items are inserted into grid (row, column, dense). | Flexbox & Grid |
grid-auto-rows |
Specifies default size for implicitly created grid row tracks. | Flexbox & Grid |
grid-column |
Shorthand property for grid-column-start and grid-column-end. | Flexbox & Grid |
grid-column-end |
Specifies end column line placement for a grid item. | Flexbox & Grid |
grid-column-start |
Specifies start column line placement for a grid item. | Flexbox & Grid |
grid-row |
Shorthand property for grid-row-start and grid-row-end. | Flexbox & Grid |
grid-row-end |
Specifies end row line placement for a grid item. | Flexbox & Grid |
grid-row-start |
Specifies start row line placement for a grid item. | Flexbox & Grid |
grid-template |
Shorthand property for grid-template-rows, grid-template-columns, and grid-template-areas. | Flexbox & Grid |
grid-template-areas |
Specifies named grid areas for layout positioning. | Flexbox & Grid |
grid-template-columns |
Specifies column track sizes and layout in CSS Grid. | Flexbox & Grid |
grid-template-rows |
Specifies row track sizes and layout in CSS Grid. | Flexbox & Grid |
hanging-punctuation |
Specifies whether punctuation characters may hang outside line box margins. | Fonts & Typography |
height |
Sets vertical height dimension of an element box. | Positioning & Box |
hyphens |
Sets how to split words to improve text wrap layout (none, manual, auto). | Fonts & Typography |
hyphenate-character |
Sets character used at end of line before hyphenation break. | Fonts & Typography |
image-rendering |
Specifies algorithm used for scaling images (pixelated, crisp-edges, auto). | UI & Effects |
@import |
Imports an external CSS stylesheet into current stylesheet. | Fonts & Typography |
initial-letter |
Specifies drop-cap size and line sink for initial letter. | Fonts & Typography |
inline-size |
Logical property specifying size in inline direction (width in horizontal mode). | Positioning & Box |
inset |
Shorthand logical property setting top, right, bottom, left offsets. | Positioning & Box |
inset-block |
Logical shorthand property setting top and bottom offsets in block direction. | Positioning & Box |
inset-block-end |
Logical property setting offset from end edge in block direction. | Positioning & Box |
inset-block-start |
Logical property setting offset from start edge in block direction. | Positioning & Box |
inset-inline |
Logical shorthand property setting start and end offsets in inline direction. | Positioning & Box |
inset-inline-end |
Logical property setting offset from end edge in inline direction. | Positioning & Box |
inset-inline-start |
Logical property setting offset from start edge in inline direction. | Positioning & Box |
isolation |
Defines whether an element creates a new stacking context for blending modes. | UI & Effects |
justify-content |
Aligns flex or grid items along the main axis. | Flexbox & Grid |
justify-items |
Defines default justification along inline/main axis for all items in grid or flex container. | Flexbox & Grid |
justify-self |
Defines justification along inline/main axis for an individual item inside grid container. | Flexbox & Grid |
@keyframes |
Controls intermediate steps in a CSS animation sequence by defining keyframe style rules. | Animation & Motion |
@layer |
Declares a cascade layer and allows defining precedence order across multiple CSS rules. | Positioning & Box |
left |
Specifies horizontal left offset position of a positioned element. | Positioning & Box |
letter-spacing |
Increases or decreases spacing between characters in text content. | Fonts & Typography |
line-break |
Specifies line breaking rules for CJK (Chinese, Japanese, Korean) text content. | Fonts & Typography |
line-height |
Sets height of line box, controlling vertical spacing between lines of text. | Fonts & Typography |
list-style |
Shorthand property for list-style-type, list-style-position, and list-style-image. | Fonts & Typography |
list-style-image |
Specifies an image to use as list item marker instead of a bullet or number. | Fonts & Typography |
list-style-position |
Specifies whether list item markers appear inside or outside content flow box. | Fonts & Typography |
list-style-type |
Specifies bullet style or numerical marker type for list items (disc, decimal, circle). | Fonts & Typography |
margin |
Sets clear margin spacing outside border edges. | Positioning & Box |
margin-block |
Logical shorthand setting margin at start and end in block direction. | Positioning & Box |
margin-block-end |
Logical property setting margin at end edge in block direction. | Positioning & Box |
margin-block-start |
Logical property setting margin at start edge in block direction. | Positioning & Box |
margin-bottom |
Sets bottom outer margin distance for an element. | Positioning & Box |
margin-inline |
Logical shorthand setting margin at start and end in inline direction. | Positioning & Box |
margin-inline-end |
Logical property setting margin at end edge in inline direction. | Positioning & Box |
margin-inline-start |
Logical property setting margin at start edge in inline direction. | Positioning & Box |
margin-left |
Sets left outer margin distance for an element. | Positioning & Box |
margin-right |
Sets right outer margin distance for an element. | Positioning & Box |
margin-top |
Sets top outer margin distance for an element. | Positioning & Box |
marker |
Shorthand property setting marker-start, marker-mid, and marker-end for SVG paths. | UI & Effects |
marker-end |
Specifies SVG marker symbol used at last vertex of a path or line. | UI & Effects |
marker-mid |
Specifies SVG marker symbol used at all intermediate vertices of a path. | UI & Effects |
marker-start |
Specifies SVG marker symbol used at first vertex of a path or line. | UI & Effects |
mask |
Shorthand property for hiding or revealing parts of an element using mask layers. | UI & Effects |
mask-clip |
Determines area affected by a mask image (content-box, border-box, fill-box). | UI & Effects |
mask-composite |
Specifies compositing operation (add, subtract, intersect) between multiple mask layers. | UI & Effects |
mask-image |
Sets image or gradient used as a mask layer for an element. | UI & Effects |
mask-mode |
Specifies whether mask layer source is treated as alpha mask or luminance mask. | UI & Effects |
mask-origin |
Specifies origin positioning area of a mask image layer. | UI & Effects |
mask-position |
Sets initial position of a mask image layer. | UI & Effects |
mask-repeat |
Sets how mask image layers are repeated across element dimensions. | UI & Effects |
mask-size |
Specifies dimensions or scaling behavior of mask image layers (cover, contain, auto). | UI & Effects |
mask-type |
Defines whether SVG <mask> element is used as luminance or alpha mask. | UI & Effects |
max-height |
Sets maximum allowed vertical height boundary for an element. | Positioning & Box |
object-fit |
Specifies how images or videos fit inside establishing containers (cover, contain, fill). | UI & Effects |
opacity |
Sets transparency level of an element (0.0 to 1.0). Composited on GPU hardware layers. | UI & Effects |
padding |
Sets inner clearance space between content and element border. | Positioning & Box |
position |
Specifies positioning scheme (static, relative, absolute, fixed, sticky). | Positioning & Box |
transform |
Applies 2D or 3D transformations (translate, scale, rotate, skew) on isolated GPU layers. | Animation & Motion |
transition |
Shorthand property defining property transitions over duration and timing functions. | Animation & Motion |
will-change |
Hints browser GPU ahead of time about upcoming property transformations. | Animation & Motion |
z-index |
Sets stack order layer of positioned elements along Z-axis. | Positioning & Box |
26.2 Interactive Sandbox — Beginner Reference Playground
Try a minimal, clean, and powerful code snippet demonstrating
accent-color, backdrop-filter, box-shadow, and transform below: