CSS Properties Reference

An Alphabetically Ordered Guide to CSS Properties

A

Property	Description	Action
accent-color	Customizes the color of user-interface elements like checkboxes, radio buttons, and progress bars to match your design. Values: any valid color. Example: input[type="checkbox"] { accent-color: purple; }
align-content	Controls alignment of multiple lines of flex items along the cross-axis when extra space exists with flex-wrap: wrap. Values: flex-start, flex-end, center, space-between, space-around, space-evenly. Example: .container { display: flex; flex-wrap: wrap; align-content: space-evenly; height: 200px; } .item { width: 50px; height: 50px; background: coral; }
align-items	Aligns all flex items along the cross-axis within a flex container. Values: flex-start, flex-end, center, baseline, stretch. Example: .container { display: flex; align-items: flex-end; height: 100px; } .item { width: 50px; height: 50px; background: teal; }
align-self	Overrides align-items for a specific flex item along the cross-axis. Values: flex-start, flex-end, center, baseline, stretch. Example: .container { display: flex; align-items: flex-start; } .special { align-self: flex-end; } .item { width: 50px; height: 50px; background: olive; }
all	Resets all CSS properties (except unicode-bidi and direction) to initial, inherited, or unset values for an element. Example: .reset { all: initial; color: red; }
animation	Shorthand for animation properties: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. Example: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 2s ease-in; }
animation-delay	Delays the start of an animation by a specified time. Values: time (e.g., 1s, 500ms). Example: .box { animation: fadeIn 2s; animation-delay: 1s; }
animation-direction	Defines animation playback: forward, reverse, alternate. Values: normal, reverse, alternate, alternate-reverse. Example: @keyframes move { to { transform: translateX(100px); } } .box { animation: move 2s infinite alternate; }
animation-duration	Sets the time for one animation cycle. Values: time (e.g., 2s, 500ms). Example: .box { animation: fadeIn 3s; }
animation-fill-mode	Applies styles before/after animation. Values: none, forwards, backwards, both. Example: .box { animation: move 2s forwards; }
animation-iteration-count	Sets how many times an animation runs. Values: number, infinite. Example: .box { animation: fadeIn 2s 3; }
animation-name	Links an element to a @keyframes rule by name. Example: @keyframes slide { to { transform: translateX(100px); } } .box { animation-name: slide; }
animation-play-state	Controls if animation is running or paused. Values: running, paused. Example: .box { animation: fadeIn 2s; animation-play-state: paused; }
animation-timing-function	Defines the speed curve of an animation. Values: ease, linear, ease-in, etc. Example: .box { animation: fadeIn 2s ease-in; }
aspect-ratio	Sets the preferred aspect ratio of an element. Values: auto, ratio (e.g., 16/9). Example: img { aspect-ratio: 16 / 9; }

B

Property	Description	Action
backdrop-filter	Applies a graphical effect (e.g., blur, brightness) to the area behind an element. Values: blur(), brightness(), etc. Example: .element { backdrop-filter: blur(5px); }
backface-visibility	Controls visibility of an element’s back face during 3D transforms. Values: visible, hidden. Example: .box { backface-visibility: hidden; }
background	Shorthand for background properties: color, image, repeat, etc. Example: .box { background: url(image.jpg) no-repeat center; }
background-attachment	Sets if a background image scrolls or is fixed. Values: scroll, fixed, local. Example: .box { background-attachment: fixed; }
background-blend-mode	Blends background layers. Values: normal, multiply, screen, etc. Example: .box { background-blend-mode: multiply; }
background-clip	Defines how far the background extends. Values: border-box, padding-box, content-box. Example: .box { background-clip: content-box; }
background-color	Sets the background color of an element. Values: color names, hex, rgb. Example: .box { background-color: #ff0000; }
background-image	Sets one or more background images. Values: url(), linear-gradient(). Example: .box { background-image: url(image.jpg); }
background-origin	Sets the origin position of a background image. Values: padding-box, border-box, content-box. Example: .box { background-origin: content-box; }
background-position	Sets the starting position of a background image. Values: top, center, 50% 50%. Example: .box { background-position: center; }
background-position-x	Sets the x-axis position of a background image. Values: left, center, 50%. Example: .box { background-position-x: center; }
background-position-y	Sets the y-axis position of a background image. Values: top, center, 50%. Example: .box { background-position-y: center; }
background-repeat	Controls repetition of a background image. Values: repeat, no-repeat, repeat-x, repeat-y. Example: .box { background-repeat: no-repeat; }
background-size	Sets the size of the background image. Values: auto, cover, contain, 100px. Example: .box { background-size: cover; }
block-size	Sets the size of an element in the block direction (vertical in horizontal writing). Values: length, percentage. Example: .box { block-size: 200px; }
border	Shorthand for border-width, border-style, border-color. Example: .box { border: 2px solid black; }
border-block	Shorthand for border-block-width, border-block-style, border-block-color. Example: .box { border-block: 2px solid red; }
border-block-color	Sets color for block-start and block-end borders. Example: .box { border-block-color: blue; }
border-block-end	Shorthand for border-block-end-width, style, color. Example: .box { border-block-end: 2px solid green; }
border-block-end-color	Sets color for the block-end border. Example: .box { border-block-end-color: green; }
border-block-end-style	Sets style for the block-end border. Values: solid, dashed, etc. Example: .box { border-block-end-style: dashed; }
border-block-end-width	Sets width for the block-end border. Values: length, thin, medium. Example: .box { border-block-end-width: 2px; }
border-block-start	Shorthand for border-block-start-width, style, color. Example: .box { border-block-start: 2px solid red; }
border-block-start-color	Sets color for the block-start border. Example: .box { border-block-start-color: red; }
border-block-start-style	Sets style for the block-start border. Example: .box { border-block-start-style: dotted; }
border-block-start-width	Sets width for the block-start border. Example: .box { border-block-start-width: 2px; }
border-block-style	Sets style for block-start and block-end borders. Example: .box { border-block-style: dashed; }
border-block-width	Sets width for block-start and block-end borders. Example: .box { border-block-width: 2px; }
border-bottom	Shorthand for border-bottom-width, style, color. Example: .box { border-bottom: 2px solid black; }
border-bottom-color	Sets color for the bottom border. Example: .box { border-bottom-color: black; }
border-bottom-left-radius	Rounds the bottom-left corner. Values: length, percentage. Example: .box { border-bottom-left-radius: 10px; }
border-bottom-right-radius	Rounds the bottom-right corner. Example: .box { border-bottom-right-radius: 10px; }
border-bottom-style	Sets style for the bottom border. Example: .box { border-bottom-style: dotted; }
border-bottom-width	Sets width for the bottom border. Example: .box { border-bottom-width: 2px; }
border-collapse	Controls table border behavior. Values: collapse, separate. Example: table { border-collapse: collapse; }
border-color	Sets color for all four borders. Example: .box { border-color: blue; }
border-end-end-radius	Rounds the block-end/inline-end corner. Example: .box { border-end-end-radius: 10px; }
border-end-start-radius	Rounds the block-end/inline-start corner. Example: .box { border-end-start-radius: 10px; }
border-image	Shorthand for border-image properties. Example: .box { border-image: url(border.png) 30 round; }
border-image-outset	Extends border image beyond border box. Example: .box { border-image-outset: 10px; }
border-image-repeat	Controls border image repetition. Values: stretch, repeat, round. Example: .box { border-image-repeat: round; }
border-image-slice	Slices the border image. Values: number, percentage. Example: .box { border-image-slice: 30; }
border-image-source	Sets the image for the border. Example: .box { border-image-source: url(border.png); }
border-image-width	Sets width of the border image. Example: .box { border-image-width: 20px; }
border-inline	Shorthand for border-inline-width, style, color. Example: .box { border-inline: 2px solid blue; }
border-inline-color	Sets color for inline-start and inline-end borders. Example: .box { border-inline-color: green; }
border-inline-end	Shorthand for border-inline-end-width, style, color. Example: .box { border-inline-end: 2px solid red; }
border-inline-end-color	Sets color for the inline-end border. Example: .box { border-inline-end-color: red; }
border-inline-end-style	Sets style for the inline-end border. Example: .box { border-inline-end-style: dashed; }
border-inline-end-width	Sets width for the inline-end border. Example: .box { border-inline-end-width: 2px; }
border-inline-start	Shorthand for border-inline-start-width, style, color. Example: .box { border-inline-start: 2px solid blue; }
border-inline-start-color	Sets color for the inline-start border. Example: .box { border-inline-start-color: blue; }
border-inline-start-style	Sets style for the inline-start border. Example: .box { border-inline-start-style: dotted; }
border-inline-start-width	Sets width for the inline-start border. Example: .box { border-inline-start-width: 2px; }
border-inline-style	Sets style for inline-start and inline-end borders. Example: .box { border-inline-style: dashed; }
border-inline-width	Sets width for inline-start and inline-end borders. Example: .box { border-inline-width: 2px; }
border-left	Shorthand for border-left-width, style, color. Example: .box { border-left: 2px solid red; }
border-left-color	Sets color for the left border. Example: .box { border-left-color: red; }
border-left-style	Sets style for the left border. Example: .box { border-left-style: dashed; }
border-left-width	Sets width for the left border. Example: .box { border-left-width: 2px; }
border-radius	Shorthand for all corner radii. Example: .box { border-radius: 10px; }
border-right	Shorthand for border-right-width, style, color. Example: .box { border-right: 2px solid blue; }
border-right-color	Sets color for the right border. Example: .box { border-right-color: blue; }
border-right-style	Sets style for the right border. Example: .box { border-right-style: dotted; }
border-right-width	Sets width for the right border. Example: .box { border-right-width: 2px; }
border-spacing	Sets space between table cell borders. Example: table { border-spacing: 10px; }
border-start-end-radius	Rounds the block-start/inline-end corner. Example: .box { border-start-end-radius: 10px; }
border-start-start-radius	Rounds the block-start/inline-start corner. Example: .box { border-start-start-radius: 10px; }
border-style	Sets style for all four borders. Example: .box { border-style: solid; }
border-top	Shorthand for border-top-width, style, color. Example: .box { border-top: 2px solid red; }
border-top-color	Sets color for the top border. Example: .box { border-top-color: red; }
border-top-left-radius	Rounds the top-left corner. Example: .box { border-top-left-radius: 10px; }
border-top-right-radius	Rounds the top-right corner. Example: .box { border-top-right-radius: 10px; }
border-top-style	Sets style for the top border. Example: .box { border-top-style: dashed; }
border-top-width	Sets width for the top border. Example: .box { border-top-width: 2px; }
border-width	Sets width for all four borders. Example: .box { border-width: 2px; }
bottom	Sets the bottom position for positioned elements. Example: .box { position: absolute; bottom: 10px; }
box-decoration-break	Controls background/border behavior at breaks. Example: .box { box-decoration-break: clone; }
box-reflect	Creates a reflection of an element. Example: .box { box-reflect: below 5px; }
box-shadow	Adds shadow to an element. Values: offset-x, offset-y, blur, color. Example: .box { box-shadow: 5px 5px 10px gray; }
box-sizing	Defines how width/height include padding/borders. Values: content-box, border-box. Example: * { box-sizing: border-box; }
break-after	Controls breaks after an element. Values: auto, always, page. Example: .box { break-after: page; }
break-before	Controls breaks before an element. Example: .box { break-before: page; }
break-inside	Controls breaks inside an element. Example: .box { break-inside: avoid; }

C

Property	Description	Action
caption-side	Specifies the placement of a table caption relative to the table. Values: top, bottom, left, right. Example: caption { caption-side: bottom; }
caret-color	Sets the color of the cursor (caret) in editable elements like inputs or textareas. Values: any color. Example: input { caret-color: red; }
@charset	Defines the character encoding for a CSS stylesheet. Must be the first line. Values: e.g., "UTF-8". Example: @charset "UTF-8";
clear	Controls how elements behave next to floated elements. Values: none, left, right, both. Example: div { clear: both; }
clip	Deprecated; clips an absolutely positioned element. Replaced by clip-path. Values: rect(). Example: .box { clip: rect(0px, 50px, 50px, 0px); }
clip-path	Clips an element to a basic shape or SVG source. Values: circle(), polygon(), url(). Example: .box { clip-path: circle(50px at center); }
color	Sets the text color of an element. Values: color names, hex, rgb, hsl. Example: p { color: blue; }
color-scheme	Indicates which OS color scheme an element should follow (light/dark). Values: normal, light, dark. Example: body { color-scheme: dark; }
column-count	Sets the number of columns an element should be divided into. Values: number. Example: .container { column-count: 3; }
column-fill	Controls how content fills columns. Values: auto, balance. Example: .container { column-fill: balance; }
column-gap	Sets the gap between columns. Values: length, percentage. Example: .container { column-gap: 20px; }
column-rule	Shorthand for column-rule-width, style, color. Example: .container { column-rule: 1px solid black; }
column-rule-color	Sets the color of the rule between columns. Example: .container { column-rule-color: black; }
column-rule-style	Sets the style of the rule between columns. Values: solid, dashed, etc. Example: .container { column-rule-style: dashed; }
column-rule-width	Sets the width of the rule between columns. Example: .container { column-rule-width: 1px; }
column-span	Specifies how many columns an element spans. Values: none, all. Example: h2 { column-span: all; }
column-width	Sets the ideal width of columns. Example: .container { column-width: 150px; }
columns	Shorthand for column-width and column-count. Example: .container { columns: 150px 3; }
@container	Defines styles based on a container's size or style. Values: query conditions. Example: @container (min-width: 500px) { .box { color: red; } }
content	Inserts generated content with :before/:after. Values: string, url, counter. Example: .box::before { content: "Hello"; }
counter-increment	Increases or decreases a CSS counter value. Example: .box { counter-increment: section; }
counter-reset	Creates or resets a CSS counter. Example: .container { counter-reset: section; }
counter-set	Sets a CSS counter to a specific value. Example: .box { counter-set: section 1; }
@counter-style	Defines a custom counter style. Example: @counter-style custom { system: cyclic; symbols: A B; }
cursor	Sets the mouse cursor type. Values: pointer, default, crosshair, etc. Example: .box { cursor: pointer; }

D

Property	Description	Action
direction	Sets the text/writing direction. Values: ltr, rtl. Example: div { direction: rtl; }
display	Defines how an element is displayed. Values: block, inline, flex, none, etc. Example: div { display: flex; }

E

Property	Description	Action
empty-cells	Controls display of borders/background on empty table cells. Values: show, hide. Example: table { empty-cells: hide; }

F

Property	Description	Action
filter	Applies visual effects like blur or grayscale. Values: blur(), brightness(), etc. Example: img { filter: blur(5px); }
flex	Shorthand for flex-grow, flex-shrink, flex-basis. Example: .item { flex: 1 1 auto; }
flex-basis	Sets the initial size of a flex item. Values: auto, length, percentage. Example: .item { flex-basis: 200px; }
flex-direction	Sets the direction of flex items. Values: row, row-reverse, column, column-reverse. Example: .container { flex-direction: column; }
flex-flow	Shorthand for flex-direction and flex-wrap. Example: .container { flex-flow: row wrap; }
flex-grow	Defines how much a flex item grows. Values: number. Example: .item { flex-grow: 1; }
flex-shrink	Defines how much a flex item shrinks. Values: number. Example: .item { flex-shrink: 1; }
flex-wrap	Controls wrapping of flex items. Values: nowrap, wrap, wrap-reverse. Example: .container { flex-wrap: wrap; }
float	Sets element floating behavior. Values: left, right, none. Example: img { float: left; }
font	Shorthand for font-style, variant, weight, size/line-height, family. Example: p { font: italic bold 16px Arial; }
@font-face	Defines a custom font for use in the document. Example: @font-face { font-family: customFont; src: url(font.woff); }
font-family	Sets the font family for text. Values: family names, generic names. Example: p { font-family: Arial, sans-serif; }
font-feature-settings	Controls advanced typographic features in OpenType fonts. Example: p { font-feature-settings: "liga" 1; }
font-kerning	Controls kerning (letter spacing) usage. Values: auto, normal, none. Example: p { font-kerning: normal; }
font-language-override	Overrides language-specific glyphs. Values: normal, language code. Example: p { font-language-override: "ENG"; }
@font-palette-values	Customizes default font palette values. Example: @font-palette-values --custom { font-family: myFont; base-palette: 2; }
font-size	Sets the size of the font. Values: length, percentage, keywords. Example: p { font-size: 16px; }
font-size-adjust	Adjusts font size for readability with fallback fonts. Values: number. Example: p { font-size-adjust: 0.5; }
font-stretch	Selects a condensed or expanded font face. Values: normal, condensed, expanded. Example: p { font-stretch: condensed; }
font-style	Sets the style of the font. Values: normal, italic, oblique. Example: p { font-style: italic; }
font-synthesis	Controls synthesis of bold/italic when missing. Values: none, weight, style. Example: p { font-synthesis: weight; }
font-variant	Enables small-caps or other variants. Values: normal, small-caps. Example: p { font-variant: small-caps; }
font-variant-alternates	Controls alternate glyphs via @font-feature-values. Example: p { font-variant-alternates: historical-forms; }
font-variant-caps	Controls capital letter glyphs. Values: normal, small-caps, etc. Example: p { font-variant-caps: small-caps; }
font-variant-east-asian	Controls East Asian glyph variants. Values: normal, ruby, etc. Example: p { font-variant-east-asian: ruby; }
font-variant-ligatures	Controls ligatures and contextual forms. Values: normal, none, common-ligatures. Example: p { font-variant-ligatures: common-ligatures; }
font-variant-numeric	Controls numeric glyph variants. Values: normal, lining-nums, etc. Example: p { font-variant-numeric: lining-nums; }
font-variant-position	Controls superscript/subscript glyphs. Values: normal, super, sub. Example: p { font-variant-position: super; }
font-weight	Sets the boldness of the font. Values: normal, bold, 100-900. Example: p { font-weight: bold; }

G

Property	Description	Action
gap	Shorthand for row-gap and column-gap. Values: length, percentage. Example: .grid { gap: 20px; }
grid	Shorthand for grid-template-rows, columns, areas, auto-rows, auto-columns, auto-flow. Example: .grid { grid: auto-flow dense / 1fr 1fr; }
grid-area	Sets grid item name or shorthand for row/column start/end. Example: .item { grid-area: 1 / 1 / 2 / 2; }
grid-auto-columns	Sets default column size in a grid. Example: .grid { grid-auto-columns: 100px; }
grid-auto-flow	Controls auto-placement of grid items. Values: row, column, dense. Example: .grid { grid-auto-flow: column; }
grid-auto-rows	Sets default row size in a grid. Example: .grid { grid-auto-rows: 100px; }
grid-column	Shorthand for grid-column-start and end. Example: .item { grid-column: 1 / 3; }
grid-column-end	Specifies where a grid item ends. Example: .item { grid-column-end: 3; }
grid-column-start	Specifies where a grid item starts. Example: .item { grid-column-start: 1; }
grid-row	Shorthand for grid-row-start and end. Example: .item { grid-row: 1 / 3; }
grid-row-end	Specifies where a grid item ends. Example: .item { grid-row-end: 3; }
grid-row-start	Specifies where a grid item starts. Example: .item { grid-row-start: 1; }
grid-template	Shorthand for grid-template-rows, columns, areas. Example: .grid { grid-template: 100px 100px / 1fr 1fr; }
grid-template-areas	Defines grid layout with named areas. Example: .grid { grid-template-areas: "header header" "main aside"; }
grid-template-columns	Sets column sizes in a grid. Example: .grid { grid-template-columns: 1fr 1fr; }
grid-template-rows	Sets row sizes in a grid. Example: .grid { grid-template-rows: 100px 100px; }

H

Property	Description	Action
hanging-punctuation	Allows punctuation to hang outside the line box. Values: none, first, last. Example: p { hanging-punctuation: first; }
height	Sets the height of an element. Values: length, percentage, auto. Example: div { height: 200px; }
hyphens	Controls word hyphenation. Values: none, manual, auto. Example: p { hyphens: auto; }
hyphenate-character	Sets the character used at hyphenation breaks. Values: string. Example: p { hyphenate-character: "–"; }

I

Property	Description	Action
image-rendering	Specifies the algorithm used for scaling images. Useful for pixel art or optimizing image quality. Values: auto, crisp-edges, pixelated. Example: img { image-rendering: pixelated; width: 200px; }
@import	Allows importing an external stylesheet into a CSS file. Must be at the top of the file, after @charset if present. Values: url(), string. Example: @import url("styles.css");
initial-letter	Controls the styling of the first letter in a block, often used for drop caps. Specifies size and sink (lines it spans). Values: normal, number (e.g., 1, 2). Example: p::first-letter { initial-letter: 2; font-size: 3em; }
inline-size	Defines the size of an element in the inline direction (e.g., width in horizontal writing modes). Values: length (px, rem), percentage, auto. Example: div { inline-size: 200px; writing-mode: horizontal-tb; }
inset	Shorthand for setting top, right, bottom, and left positions of a positioned element. Values: length (px, %), auto, 1-4 values. Example: .box { position: absolute; inset: 10px 20px 30px 40px; }
inset-block	Sets the start and end distances in the block direction (e.g., top/bottom in horizontal writing). Values: length (px, %), auto, 1-2 values. Example: .box { position: absolute; inset-block: 10px 20px; }
inset-block-end	Sets the end distance in the block direction (e.g., bottom in horizontal writing). Values: length (px, %), auto. Example: .box { position: absolute; inset-block-end: 10px; }
inset-block-start	Sets the start distance in the block direction (e.g., top in horizontal writing). Values: length (px, %), auto. Example: .box { position: absolute; inset-block-start: 10px; }
inset-inline	Sets the start and end distances in the inline direction (e.g., left/right in horizontal writing). Values: length (px, %), auto, 1-2 values. Example: .box { position: absolute; inset-inline: 10px 20px; }
inset-inline-end	Sets the end distance in the inline direction (e.g., right in horizontal writing). Values: length (px, %), auto. Example: .box { position: absolute; inset-inline-end: 10px; }
inset-inline-start	Sets the start distance in the inline direction (e.g., left in horizontal writing). Values: length (px, %), auto. Example: .box { position: absolute; inset-inline-start: 10px; }
isolation	Determines if an element creates a new stacking context, affecting blending and z-index behavior. Values: auto, isolate. Example: .box { isolation: isolate; mix-blend-mode: multiply; }

J

Property	Description	Action
justify-content	Controls the alignment of flex items along the main axis when there is extra space in a flex container. Values: flex-start, flex-end, center, space-between, space-around, space-evenly. Example: .container { display: flex; justify-content: space-between; } .item { width: 100px; height: 100px; background: lightblue; }
justify-items	Sets the default alignment for grid items along the inline axis within a grid container. Values: start, end, center, stretch. Example: .grid { display: grid; justify-items: center; grid-template-columns: repeat(3, 1fr); } .item { height: 50px; background: coral; }
justify-self	Overrides the justify-items alignment for a specific grid item along the inline axis. Values: start, end, center, stretch. Example: .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .item { justify-self: end; height: 50px; background: teal; }

K

Property	Description	Action
@keyframes	Defines the animation steps by specifying styles at different points (from/to or percentages) in an animation sequence. Used with animation-name. Example: @keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } .box { animation: slide 2s infinite; }

L

Property	Description	Action
@layer	Controls the cascade order of styles using CSS layers, allowing explicit layering of rules. Values: layer name or block. Example: @layer base { .base { color: red; } } @layer custom { .custom { color: blue; } }
left	Sets the left position of a positioned element (relative, absolute, fixed). Values: length (px, %), auto. Example: .box { position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; background: gray; }
letter-spacing	Adjusts the space between characters in text. Values: normal, length (px, em). Example: p { letter-spacing: 2px; }
line-break	Controls line breaking behavior, especially for CJK text. Values: auto, loose, normal, strict. Example: p { line-break: strict; }
line-height	Sets the height of a line of text. Values: normal, number, length (px, em), percentage. Example: p { line-height: 1.5; }
list-style	Shorthand for list-style-type, list-style-position, list-style-image. Example: ul { list-style: square inside; }
list-style-image	Sets an image as the list item marker. Values: url(), none. Example: ul { list-style-image: url('star.png'); }
list-style-position	Defines the position of list item markers. Values: inside, outside. Example: ul { list-style-position: inside; }
list-style-type	Sets the type of list item marker. Values: disc, circle, square, decimal, etc. Example: ul { list-style-type: decimal; }

M

Property	Description	Action
margin	Shorthand for setting all margin properties (top, right, bottom, left). Values: length (px, %), auto, 1-4 values. Example: .box { margin: 10px 20px 30px 40px; }
margin-block	Sets margins in the block direction (e.g., top/bottom in horizontal writing). Values: length (px, %), auto, 1-2 values. Example: .box { margin-block: 10px 20px; }
margin-block-end	Sets the end margin in the block direction. Values: length (px, %), auto. Example: .box { margin-block-end: 10px; }
margin-block-start	Sets the start margin in the block direction. Values: length (px, %), auto. Example: .box { margin-block-start: 10px; }
margin-bottom	Sets the bottom margin of an element. Values: length (px, %), auto. Example: .box { margin-bottom: 20px; }
margin-inline	Sets margins in the inline direction (e.g., left/right in horizontal writing). Values: length (px, %), auto, 1-2 values. Example: .box { margin-inline: 10px 20px; }
margin-inline-end	Sets the end margin in the inline direction. Values: length (px, %), auto. Example: .box { margin-inline-end: 10px; }
margin-inline-start	Sets the start margin in the inline direction. Values: length (px, %), auto. Example: .box { margin-inline-start: 10px; }
margin-left	Sets the left margin of an element. Values: length (px, %), auto. Example: .box { margin-left: 20px; }
margin-right	Sets the right margin of an element. Values: length (px, %), auto. Example: .box { margin-right: 20px; }
margin-top	Sets the top margin of an element. Values: length (px, %), auto. Example: .box { margin-top: 20px; }
marker	Defines a marker to be drawn at all vertices of an element's path (SVG use). Values: none, url(). Example: path { marker: url(#arrow); }
marker-end	Specifies a marker for the last vertex of an element's path. Values: none, url(). Example: path { marker-end: url(#arrow); }
marker-mid	Specifies markers for middle vertices of an element's path. Values: none, url(). Example: path { marker-mid: url(#dot); }
marker-start	Specifies a marker for the first vertex of an element's path. Values: none, url(). Example: path { marker-start: url(#circle); }
mask	Shorthand for mask-related properties to create a mask layer. Values: various (see individual properties). Example: .box { mask: url(mask.png) no-repeat; }
mask-clip	Defines the area affected by a mask image. Values: border-box, padding-box, content-box, etc. Example: .box { mask-clip: content-box; }
mask-composite	Sets the compositing operation for mask layers. Values: add, subtract, intersect, etc. Example: .box { mask-composite: add; }
mask-image	Sets an image to use as a mask layer. Values: url(), none, linear-gradient(). Example: .box { mask-image: url(mask.png); }
mask-mode	Determines if the mask is treated as luminance or alpha. Values: alpha, luminance. Example: .box { mask-mode: luminance; }
mask-origin	Sets the origin position of the mask image. Values: border-box, padding-box, content-box. Example: .box { mask-origin: content-box; }
mask-position	Sets the starting position of the mask image. Values: top, center, length (px, %). Example: .box { mask-position: center; }
mask-repeat	Controls repetition of the mask image. Values: repeat, no-repeat, repeat-x, repeat-y. Example: .box { mask-repeat: no-repeat; }
mask-size	Sets the size of the mask image. Values: auto, cover, contain, length (px, %). Example: .box { mask-size: cover; }
mask-type	Defines how an SVG element is interpreted. Values: luminance, alpha. Example: mask { mask-type: luminance; }
max-height	Sets the maximum height of an element. Values: length (px, %), none. Example: .box { max-height: 200px; }
max-width	Sets the maximum width of an element. Values: length (px, %), none. Example: .box { max-width: 300px; }
@media	Applies styles based on media queries (e.g., screen size, device type). Values: query conditions. Example: @media (max-width: 600px) { body { background: gray; } }
max-block-size	Sets the maximum size in the block direction. Values: length (px, %), none. Example: .box { max-block-size: 200px; }
max-inline-size	Sets the maximum size in the inline direction. Values: length (px, %), none. Example: .box { max-inline-size: 300px; }
min-block-size	Sets the minimum size in the block direction. Values: length (px, %), 0. Example: .box { min-block-size: 100px; }
min-inline-size	Sets the minimum size in the inline direction. Values: length (px, %), 0. Example: .box { min-inline-size: 100px; }
min-height	Sets the minimum height of an element. Values: length (px, %), 0. Example: .box { min-height: 100px; }
min-width	Sets the minimum width of an element. Values: length (px, %), 0. Example: .box { min-width: 100px; }
mix-blend-mode	Defines how an element's content blends with its background. Values: normal, multiply, screen, etc. Example: .box { mix-blend-mode: multiply; background: red; }

N

Property	Description	Action
@namespace	Defines an XML namespace for use in the stylesheet, typically for XML or SVG. Values: url() or prefix. Example: @namespace url(http://www.w3.org/1999/xhtml);

O

Property	Description	Action
object-fit	Controls how the content of a replaced element (e.g., img, video) fits its box. Values: fill, contain, cover, none, scale-down. Example: img { object-fit: cover; width: 200px; height: 200px; }
object-position	Sets the alignment of a replaced element within its box. Values: top, center, length (px, %). Example: img { object-position: 50% 50%; object-fit: cover; }
offset	Shorthand for offset-anchor, distance, path, position, and rotate for motion paths. Values: various. Example: .box { offset: path("M10 10 Q 95 10 90 90") 50%; }
offset-anchor	Fixes a point on an element to a motion path. Values: auto, length (px, %), percentage. Example: .box { offset-anchor: 50% 50%; offset-path: circle(50%); }
offset-distance	Sets the position along a motion path. Values: length (px, %), percentage. Example: .box { offset-distance: 50%; offset-path: circle(50%); }
offset-path	Defines the path an element follows during animation. Values: none, path(), circle(), etc. Example: .box { offset-path: path('M10 10 Q 95 10 90 90'); }
offset-position	Sets the initial position along a motion path. Values: auto, length (px, %), percentage. Example: .box { offset-position: 20px 20px; offset-path: circle(50%); }
offset-rotate	Rotates an element along a motion path. Values: auto, reverse, angle (deg). Example: .box { offset-rotate: 45deg; offset-path: circle(50%); }
opacity	Sets the transparency level of an element. Values: 0 to 1. Example: .box { opacity: 0.5; }
order	Controls the order of flex or grid items. Values: integer. Example: .item { order: 2; } .container { display: flex; }
orphans	Sets the minimum number of lines at the bottom of a page or column. Values: integer. Example: p { orphans: 2; }
outline	Shorthand for outline-width, style, and color. Values: various. Example: .box { outline: 2px solid blue; }
outline-color	Sets the color of the outline. Values: color (hex, rgb, etc.), invert. Example: .box { outline-color: green; }
outline-offset	Offsets the outline from the border edge. Values: length (px, em). Example: .box { outline: 2px solid black; outline-offset: 5px; }
outline-style	Sets the style of the outline. Values: none, dotted, dashed, solid, etc. Example: .box { outline-style: dashed; }
outline-width	Sets the width of the outline. Values: length (px, em), thin, medium, thick. Example: .box { outline-width: 3px; }
overflow	Defines behavior when content overflows an element's box. Values: visible, hidden, scroll, auto. Example: .box { overflow: scroll; height: 100px; width: 100px; }
overflow-anchor	Controls whether content shifts when new content loads above in a scrollable container. Values: auto, none. Example: .container { overflow-anchor: none; }
overflow-wrap	Allows breaking long words if they overflow. Values: normal, break-word. Example: p { overflow-wrap: break-word; }
overflow-x	Controls horizontal overflow behavior. Values: visible, hidden, scroll, auto. Example: .box { overflow-x: scroll; }
overflow-y	Controls vertical overflow behavior. Values: visible, hidden, scroll, auto. Example: .box { overflow-y: scroll; }
overscroll-behavior	Controls scroll chaining or overscroll effects. Values: auto, contain, none. Example: .box { overscroll-behavior: contain; }
overscroll-behavior-block	Controls overscroll in the block direction. Values: auto, contain, none. Example: .box { overscroll-behavior-block: contain; }
overscroll-behavior-inline	Controls overscroll in the inline direction. Values: auto, contain, none. Example: .box { overscroll-behavior-inline: contain; }
overscroll-behavior-x	Controls horizontal overscroll behavior. Values: auto, contain, none. Example: .box { overscroll-behavior-x: contain; }
overscroll-behavior-y	Controls vertical overscroll behavior. Values: auto, contain, none. Example: .box { overscroll-behavior-y: contain; }

P

Property	Description	Action
padding	Shorthand for setting all padding properties (top, right, bottom, left). Values: length (px, %), 1-4 values. Example: .box { padding: 10px 20px 30px 40px; }
padding-block	Sets padding in the block direction. Values: length (px, %), 1-2 values. Example: .box { padding-block: 10px 20px; }
padding-block-end	Sets padding at the end in the block direction. Values: length (px, %). Example: .box { padding-block-end: 10px; }
padding-block-start	Sets padding at the start in the block direction. Values: length (px, %). Example: .box { padding-block-start: 10px; }
padding-bottom	Sets the bottom padding of an element. Values: length (px, %). Example: .box { padding-bottom: 20px; }
padding-inline	Sets padding in the inline direction. Values: length (px, %), 1-2 values. Example: .box { padding-inline: 10px 20px; }
padding-inline-end	Sets padding at the end in the inline direction. Values: length (px, %). Example: .box { padding-inline-end: 10px; }
padding-inline-start	Sets padding at the start in the inline direction. Values: length (px, %). Example: .box { padding-inline-start: 10px; }
padding-left	Sets the left padding of an element. Values: length (px, %). Example: .box { padding-left: 20px; }
padding-right	Sets the right padding of an element. Values: length (px, %). Example: .box { padding-right: 20px; }
padding-top	Sets the top padding of an element. Values: length (px, %). Example: .box { padding-top: 20px; }
@page	Customizes properties for printed pages, like margins and orientation. Values: various. Example: @page { margin: 1in; }
page-break-after	Controls page breaks after an element (deprecated, use break-after). Values: auto, always, avoid. Example: .box { page-break-after: always; }
page-break-before	Controls page breaks before an element (deprecated, use break-before). Values: auto, always, avoid. Example: .box { page-break-before: always; }
page-break-inside	Controls page breaks inside an element (deprecated, use break-inside). Values: auto, avoid. Example: .box { page-break-inside: avoid; }
paint-order	Defines the order of painting for SVG elements (fill, stroke, markers). Values: normal, fill, stroke, markers. Example: path { paint-order: stroke fill; }
perspective	Applies a perspective effect to 3D-transformed elements. Values: length (px), none. Example: .container { perspective: 500px; } .box { transform: rotateY(45deg); }
perspective-origin	Sets the origin point for a perspective effect. Values: top, center, length (px, %). Example: .container { perspective-origin: 50% 50%; perspective: 500px; }
place-content	Shorthand for align-content and justify-content in flex/grid layouts. Values: start, center, etc. Example: .grid { place-content: center; display: grid; }
place-items	Shorthand for align-items and justify-items in grid layouts. Values: start, center, etc. Example: .grid { place-items: center; display: grid; }
place-self	Shorthand for align-self and justify-self in grid layouts. Values: start, center, etc. Example: .item { place-self: end; } .grid { display: grid; }
pointer-events	Controls whether an element responds to pointer events. Values: auto, none, visible, etc. Example: .box { pointer-events: none; }
position	Defines the positioning method for an element. Values: static, relative, absolute, fixed, sticky. Example: .box { position: absolute; top: 10px; left: 10px; }
@property	Defines custom CSS properties with syntax and inheritance. Values: various. Example: @property --myColor { syntax: ''; initial: blue; inherits: false; }

Q

Property	Description	Action
quotes	Sets the quotation marks for embedded quotations. Values: string pairs, none. Example: q { quotes: '«' '»' '‹' '›'; }

R

Property	Description	Action
resize	Controls if and how an element can be resized by the user. Values: none, both, horizontal, vertical. Example: textarea { resize: vertical; }
right	Sets the right position of a positioned element. Values: length (px, %), auto. Example: .box { position: absolute; right: 20px; top: 20px; }
rotate	Applies a rotation transform to an element. Values: angle (deg, rad), number. Example: .box { rotate: 45deg; }
row-gap	Sets the gap between grid rows. Values: length (px, %), normal. Example: .grid { row-gap: 20px; display: grid; }

S

Property	Description	Action
scale	Applies a scaling transform to an element. Values: number, percentage. Example: .box { scale: 1.5; }
@scope	Allows styling elements within specific DOM subtrees. Values: scope block. Example: @scope (.container) { .child { color: red; } }
scroll-behavior	Defines scroll animation behavior. Values: auto, smooth. Example: html { scroll-behavior: smooth; }
scroll-margin	Shorthand for setting scroll margins on all sides. Values: length (px, %). Example: .box { scroll-margin: 20px; }
scroll-margin-block	Sets scroll margins in the block direction. Values: length (px, %). Example: .box { scroll-margin-block: 20px; }
scroll-margin-block-end	Sets the end scroll margin in the block direction. Values: length (px, %). Example: .box { scroll-margin-block-end: 20px; }
scroll-margin-block-start	Sets the start scroll margin in the block direction. Values: length (px, %). Example: .box { scroll-margin-block-start: 20px; }
scroll-margin-bottom	Sets the bottom scroll margin. Values: length (px, %). Example: .box { scroll-margin-bottom: 20px; }
scroll-margin-inline	Sets scroll margins in the inline direction. Values: length (px, %). Example: .box { scroll-margin-inline: 20px; }
scroll-margin-inline-end	Sets the end scroll margin in the inline direction. Values: length (px, %). Example: .box { scroll-margin-inline-end: 20px; }
scroll-margin-inline-start	Sets the start scroll margin in the inline direction. Values: length (px, %). Example: .box { scroll-margin-inline-start: 20px; }
scroll-margin-left	Sets the left scroll margin. Values: length (px, %). Example: .box { scroll-margin-left: 20px; }
scroll-margin-right	Sets the right scroll margin. Values: length (px, %). Example: .box { scroll-margin-right: 20px; }
scroll-margin-top	Sets the top scroll margin. Values: length (px, %). Example: .box { scroll-margin-top: 20px; }
scroll-padding	Shorthand for setting scroll padding on all sides. Values: length (px, %). Example: .container { scroll-padding: 20px; }
scroll-padding-block	Sets scroll padding in the block direction. Values: length (px, %). Example: .container { scroll-padding-block: 20px; }
scroll-padding-block-end	Sets end scroll padding in the block direction. Values: length (px, %). Example: .container { scroll-padding-block-end: 20px; }
scroll-padding-block-start	Sets start scroll padding in the block direction. Values: length (px, %). Example: .container { scroll-padding-block-start: 20px; }
scroll-padding-bottom	Sets bottom scroll padding. Values: length (px, %). Example: .container { scroll-padding-bottom: 20px; }
scroll-padding-inline	Sets scroll padding in the inline direction. Values: length (px, %). Example: .container { scroll-padding-inline: 20px; }
scroll-padding-inline-end	Sets end scroll padding in the inline direction. Values: length (px, %). Example: .container { scroll-padding-inline-end: 20px; }
scroll-padding-inline-start	Sets start scroll padding in the inline direction. Values: length (px, %). Example: .container { scroll-padding-inline-start: 20px; }
scroll-padding-left	Sets left scroll padding. Values: length (px, %). Example: .container { scroll-padding-left: 20px; }
scroll-padding-right	Sets right scroll padding. Values: length (px, %). Example: .container { scroll-padding-right: 20px; }
scroll-padding-top	Sets top scroll padding. Values: length (px, %). Example: .container { scroll-padding-top: 20px; }
scroll-snap-align	Defines snap points for scrolling elements. Values: start, end, center, none. Example: .item { scroll-snap-align: center; }
scroll-snap-stop	Controls whether scrolling stops at snap points. Values: normal, always. Example: .container { scroll-snap-stop: always; }
scroll-snap-type	Defines the snap behavior during scrolling. Values: none, x, y, block, inline, both. Example: .container { scroll-snap-type: y mandatory; }
scrollbar-color	Sets the colors of an element's scrollbar. Values: auto, color pairs (e.g., dark). Example: .box { scrollbar-color: dark; }
shape-outside	Defines a shape for text to wrap around. Values: none, url(), circle(), etc. Example: img { shape-outside: circle(50%); float: left; }
@starting-style	Defines initial styles before an element's first style update. Values: style block. Example: @starting-style { .box { opacity: 0; } }
@supports	Tests browser support for CSS features and applies styles accordingly. Values: feature queries. Example: @supports (display: grid) { .grid { display: grid; } }

T

Property	Description	Action
tab-size	Sets the width of a tab character. Values: length (px, em), integer. Example: pre { tab-size: 4; }
table-layout	Defines the algorithm for laying out table cells. Values: auto, fixed. Example: table { table-layout: fixed; }
text-align	Sets the horizontal alignment of text. Values: left, right, center, justify. Example: p { text-align: center; }
text-align-last	Controls alignment of the last line when text-align is justify. Values: auto, left, right, center. Example: p { text-align: justify; text-align-last: center; }
text-combine-upright	Combines characters into a single vertical glyph (e.g., for Japanese). Values: none, all. Example: span { text-combine-upright: all; writing-mode: vertical-rl; }
text-decoration	Shorthand for text-decoration-line, style, color, thickness. Values: various. Example: a { text-decoration: underline; }
text-decoration-color	Sets the color of text decoration. Values: any color. Example: a { text-decoration-color: blue; }
text-decoration-line	Sets the type of line in text decoration. Values: none, underline, overline, line-through. Example: a { text-decoration-line: underline; }
text-decoration-style	Sets the style of the decoration line. Values: solid, double, dotted, dashed, wavy. Example: a { text-decoration-style: wavy; }
text-decoration-thickness	Sets the thickness of the decoration line. Values: auto, length (px, %), from-font. Example: a { text-decoration-thickness: 2px; }
text-emphasis	Shorthand for text-emphasis-style and color. Values: various. Example: p { text-emphasis: dot red; }
text-emphasis-color	Sets the color of emphasis marks. Values: any color. Example: p { text-emphasis-color: red; }
text-emphasis-position	Sets the position of emphasis marks. Values: over right, under left. Example: p { text-emphasis-position: over right; }
text-emphasis-style	Sets the style of emphasis marks. Values: none, dot, circle, double-circle, etc. Example: p { text-emphasis-style: dot; }
text-indent	Sets the indentation of the first line in a text block. Values: length (px, em), percentage. Example: p { text-indent: 20px; }
text-justify	Sets the justification method when text-align is justify. Values: auto, inter-word, inter-character. Example: p { text-align: justify; text-justify: inter-word; }
text-orientation	Defines the orientation of text characters. Values: mixed, upright, sideways. Example: p { writing-mode: vertical-rl; text-orientation: upright; }
text-overflow	Specifies behavior when text overflows its container. Values: clip, ellipsis. Example: .box { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100px; }
text-shadow	Adds shadow to text. Values: offset-x, offset-y, blur, color. Example: p { text-shadow: 2px 2px 4px gray; }
text-transform	Controls text capitalization. Values: none, capitalize, uppercase, lowercase. Example: p { text-transform: uppercase; }
text-underline-offset	Sets the offset distance of the underline decoration. Values: auto, length (px, %). Example: a { text-underline-offset: 2px; }
text-underline-position	Sets the position of the underline decoration. Values: auto, under, left, right. Example: a { text-underline-position: under; }
top	Sets the top position of a positioned element. Values: length (px, %), auto. Example: .box { position: absolute; top: 20px; left: 20px; }
transform	Applies 2D or 3D transformations. Values: translate(), rotate(), scale(), etc. Example: .box { transform: rotate(45deg); }
transform-origin	Sets the origin point for transformations. Values: top, center, length (px, %). Example: .box { transform-origin: 0 0; transform: rotate(45deg); }
transform-style	Defines how nested 3D elements are rendered. Values: flat, preserve-3d. Example: .container { transform-style: preserve-3d; }
transition	Shorthand for transition properties. Values: property, duration, timing, delay. Example: .box { transition: width 2s ease; }
transition-delay	Sets the delay before a transition starts. Values: time (s, ms). Example: .box { transition-delay: 1s; }
transition-duration	Sets the duration of a transition. Values: time (s, ms). Example: .box { transition-duration: 2s; }
transition-property	Specifies the property to transition. Values: all, property name. Example: .box { transition-property: width; }
transition-timing-function	Sets the speed curve of a transition. Values: ease, linear, ease-in, etc. Example: .box { transition-timing-function: ease-in; }
translate	Applies a translation transform. Values: length (px, %), percentage. Example: .box { translate: 20px 30px; }

U

Property	Description	Action
unicode-bidi	Used with direction to control bidirectional text overrides. Values: normal, embed, bidi-override. Example: p { unicode-bidi: bidi-override; direction: rtl; }
user-select	Controls whether text can be selected by the user. Values: auto, none, text, all. Example: p { user-select: none; }

V

Property	Description	Action
vertical-align	Sets the vertical alignment of an inline or table-cell element. Values: baseline, top, middle, bottom, etc. Example: img { vertical-align: middle; }
visibility	Controls whether an element is visible. Values: visible, hidden, collapse. Example: .box { visibility: hidden; }

W

Property	Description	Action
white-space	Controls how whitespace inside an element is handled, including line breaks and spaces. Values: normal, nowrap, pre, pre-wrap, pre-line. Example: p { white-space: pre-wrap; }
widows	Sets the minimum number of lines that must be left at the top of a page or column when printing or paginating. Values: integer. Example: p { widows: 2; }
width	Sets the width of an element. Values: length (px, %), auto, initial, inherit. Example: .box { width: 200px; }
word-break	Specifies how words should break when they reach the end of a line, useful for long strings. Values: normal, break-all, keep-all, break-word. Example: p { word-break: break-all; }
word-spacing	Increases or decreases the space between words in a text. Values: normal, length (px, em). Example: p { word-spacing: 5px; }
word-wrap	Allows long, unbreakable words to be broken and wrapped to the next line (alias for overflow-wrap). Values: normal, break-word. Example: p { word-wrap: break-word; }
writing-mode	Specifies the direction and flow of text lines, either horizontally or vertically. Values: horizontal-tb, vertical-rl, vertical-lr. Example: p { writing-mode: vertical-rl; }

Z

Property	Description	Action
z-index	Sets the stack order of a positioned element, determining which element appears on top. Values: auto, integer. Example: .box { position: absolute; z-index: 10; }
zoom	Specifies the zoom factor for an element, scaling it in and out (not widely supported). Values: normal, number, percentage. Example: .box { zoom: 150%; }