CSS Properties Reference

Comprehensive reference of all major CSS properties

About This Reference

This comprehensive reference lists all major CSS properties organized by category. Properties are the fundamental building blocks of CSS - they define how elements should look and behave. Each property controls a specific aspect of an element's appearance, layout, or interaction.

Each property includes a description of its purpose and a link to the official W3C specification. Click section headings to view related tutorials with practical examples.

Layout & Display

Property Description Links
display Controls element's display behavior (block, inline, flex, grid, etc.) Spec
position Sets positioning method (static, relative, absolute, fixed, sticky) Demo Spec
top Sets top offset for positioned elements Demo Spec
right Sets right offset for positioned elements Demo Spec
bottom Sets bottom offset for positioned elements Demo Spec
left Sets left offset for positioned elements Demo Spec
inset Shorthand for top, right, bottom, left Spec
inset-block Logical property for vertical offsets Spec
inset-inline Logical property for horizontal offsets Spec
float Floats element left or right Spec
clear Controls clearing of floated elements Spec
z-index Sets stacking order of positioned elements Spec
overflow Controls content overflow behavior Spec
overflow-x Controls horizontal overflow Spec
overflow-y Controls vertical overflow Spec
visibility Controls element visibility (visible, hidden, collapse) Spec
aspect-ratio Sets preferred aspect ratio for element Spec
contain Controls containment of layout, style, paint, size Spec
content-visibility Controls rendering behavior for performance optimization Spec
block-size Logical property for height (in horizontal writing mode) Spec
inline-size Logical property for width (in horizontal writing mode) Spec
max-block-size Logical property for max-height Spec
max-inline-size Logical property for max-width Spec
min-block-size Logical property for min-height Spec
min-inline-size Logical property for min-width Spec
object-fit Controls how replaced content (images/video) fits container Spec
object-position Sets position of replaced element's content Spec
overlay Controls top layer positioning Spec
anchor-name Names element as anchor for anchor positioning Spec
position-anchor Associates positioned element with anchor Spec
position-area Positions element relative to anchor in grid areas Spec

Flexbox

Property Description Links
flex Shorthand for flex-grow, flex-shrink, and flex-basis Demo Spec
flex-grow Defines flex item's ability to grow Demo Spec
flex-shrink Defines flex item's ability to shrink Demo Spec
flex-basis Defines default size of flex item Demo Spec
flex-direction Sets main axis direction (row, column, reverse) Demo Spec
flex-wrap Controls wrapping of flex items Demo Spec
flex-flow Shorthand for flex-direction and flex-wrap Demo Spec
justify-content Aligns items along main axis Demo Spec
align-items Aligns items along cross axis Demo Spec
align-self Overrides align-items for individual item Demo Spec
align-content Aligns flex lines when there's extra space Demo Spec
gap Shorthand for row-gap and column-gap Demo Spec
row-gap Sets gap between rows Demo Spec
column-gap Sets gap between columns Demo Spec
order Controls order of flex items Demo Spec

Grid Layout

Property Description Links
grid Shorthand for all grid properties Demo Spec
grid-template Shorthand for rows, columns, and areas Demo Spec
grid-template-columns Defines grid column tracks Demo Spec
grid-template-rows Defines grid row tracks Demo Spec
grid-template-areas Defines named grid areas Demo Spec
grid-area Places item in named area or coordinates Demo Spec
grid-row Shorthand for grid-row-start and grid-row-end Demo Spec
grid-row-start Sets item's row start position Demo Spec
grid-row-end Sets item's row end position Demo Spec
grid-column Shorthand for grid-column-start and grid-column-end Demo Spec
grid-column-start Sets item's column start position Demo Spec
grid-column-end Sets item's column end position Demo Spec
grid-auto-flow Controls auto-placement algorithm Demo Spec
grid-auto-rows Sets size of implicit rows Demo Spec
grid-auto-columns Sets size of implicit columns Demo Spec
place-items Shorthand for align-items and justify-items Spec
place-content Shorthand for align-content and justify-content Spec
place-self Shorthand for align-self and justify-self Spec

Box Model

Property Description Links
width Sets element's width Spec
height Sets element's height Spec
min-width Sets minimum width Spec
min-height Sets minimum height Spec
max-width Sets maximum width Spec
max-height Sets maximum height Spec
margin Shorthand for all margin properties Spec
margin-top Sets top margin Spec
margin-right Sets right margin Spec
margin-bottom Sets bottom margin Spec
margin-left Sets left margin Spec
margin-block Logical property for vertical margins Spec
margin-inline Logical property for horizontal margins Spec
padding Shorthand for all padding properties Spec
padding-top Sets top padding Spec
padding-right Sets right padding Spec
padding-bottom Sets bottom padding Spec
padding-left Sets left padding Spec
padding-block Logical property for vertical padding Spec
padding-inline Logical property for horizontal padding Spec
box-sizing Controls how width/height are calculated Spec

Typography

Property Description Links
font Shorthand for all font properties Spec
font-family Sets font family Demo Spec
font-size Sets font size Demo Spec
font-weight Sets font weight (boldness) Demo Spec
font-style Sets font style (normal, italic, oblique) Demo Spec
font-variant Controls font variants Demo Spec
line-height Sets line height (leading) Spec
letter-spacing Sets spacing between characters Demo Spec
word-spacing Sets spacing between words Demo Spec
text-align Sets horizontal text alignment Demo Spec
text-align-last Aligns last line of text Demo Spec
text-decoration Shorthand for text decoration properties Demo Spec
text-decoration-line Sets decoration line type (underline, overline, line-through) Demo Spec
text-decoration-color Sets decoration line color Demo Spec
text-decoration-style Sets decoration line style (solid, wavy, dashed, dotted) Demo Spec
text-decoration-thickness Sets decoration line thickness Demo Spec
text-underline-offset Sets offset distance of underline Demo Spec
text-transform Controls text capitalization Spec
text-indent Sets first-line indentation Spec
text-shadow Adds shadow to text Spec
text-overflow Controls how overflowed text is displayed Spec
text-wrap Controls text wrapping behavior (balance, pretty) Spec
white-space Controls white space handling Spec
word-break Controls word breaking Spec
word-wrap Controls word wrapping (alias for overflow-wrap) Spec
hyphens Controls hyphenation Spec
vertical-align Sets vertical alignment Spec
line-clamp Limits text to specified number of lines Spec
text-wrap-mode Controls text wrapping mode (wrap, nowrap) Spec
text-wrap-style Controls text wrapping style (auto, balance, stable, pretty) Spec
hanging-punctuation Controls hanging punctuation Spec
hyphenate-character Sets hyphen character Spec
hyphenate-limit-chars Sets minimum word length for hyphenation Spec
initial-letter Creates drop caps effect Spec
text-spacing-trim Trims spacing around CJK punctuation Spec
text-autospace Adds spacing between CJK and Latin characters Spec
text-size-adjust Controls text size inflation on mobile Spec

Colors & Backgrounds

Property Description Links
color Sets text color Spec
opacity Sets element opacity (0-1) Spec
background Shorthand for all background properties Spec
background-color Sets background color Demo Spec
background-image Sets background image Demo Spec
background-position Sets background image position Demo Spec
background-size Sets background image size Demo Spec
background-repeat Controls background image repetition Demo Spec
background-attachment Sets background scroll behavior Demo Spec
background-origin Sets background positioning area Demo Spec
background-clip Sets background painting area Spec
background-blend-mode Blends background layers Spec
color-scheme Indicates color schemes element can render in (light, dark) Spec
forced-color-adjust Controls forced colors mode behavior Spec
print-color-adjust Controls color adjustments for printing Spec

Borders & Outlines

Property Description Links
border Shorthand for all border properties Demo Spec
border-width Sets border width for all sides Demo Spec
border-style Sets border style for all sides Demo Spec
border-color Sets border color for all sides Demo Spec
border-top Shorthand for top border Spec
border-right Shorthand for right border Spec
border-bottom Shorthand for bottom border Spec
border-left Shorthand for left border Spec
border-radius Rounds border corners Demo Spec
border-top-left-radius Rounds top-left corner Demo Spec
border-top-right-radius Rounds top-right corner Spec
border-bottom-left-radius Rounds bottom-left corner Spec
border-bottom-right-radius Rounds bottom-right corner Spec
border-image Shorthand for border-image properties Spec
border-collapse Controls table border collapsing Spec
border-spacing Sets spacing between table borders Spec
outline Shorthand for outline properties Spec
outline-width Sets outline width Spec
outline-style Sets outline style Spec
outline-color Sets outline color Spec
outline-offset Sets space between outline and border Spec

Transforms & Animations

Property Description Links
transform Applies 2D or 3D transformations Demo Spec
transform-origin Sets transformation origin point Demo Spec
transform-style Sets 3D rendering context Demo Spec
perspective Sets perspective for 3D transforms Demo Spec
perspective-origin Sets perspective origin point Spec
backface-visibility Controls visibility of back face Spec
transition Shorthand for transition properties Demo Spec
transition-property Sets properties to transition Demo Spec
transition-duration Sets transition duration Demo Spec
transition-timing-function Sets transition easing function Demo Spec
transition-delay Sets transition delay Demo Spec
animation Shorthand for animation properties Demo Spec
animation-name Sets keyframe animation name Demo Spec
animation-duration Sets animation duration Demo Spec
animation-timing-function Sets animation easing function Spec
animation-delay Sets animation delay Spec
animation-iteration-count Sets number of animation iterations Spec
animation-direction Sets animation playback direction Spec
animation-fill-mode Sets styles before/after animation Spec
animation-play-state Controls animation running/paused state Spec
offset Shorthand for motion path properties Spec
offset-path Defines the motion path an element follows Spec
offset-distance Position along the motion path (0% to 100%) Spec
offset-rotate Rotation of element along the motion path Spec
offset-anchor Point within element attached to the path Spec

Scroll & View Animations

Property Description Links
animation-timeline Specifies timeline that controls animation progress Spec
animation-range Shorthand for animation-range-start and animation-range-end Spec
animation-range-start Sets start of animation attachment range Spec
animation-range-end Sets end of animation attachment range Spec
scroll-timeline Shorthand for scroll-timeline-name and scroll-timeline-axis Spec
scroll-timeline-name Names a scroll timeline Spec
scroll-timeline-axis Sets scroll timeline axis (block, inline, x, y) Spec
view-timeline Shorthand for view-timeline-name and view-timeline-axis Spec
view-timeline-name Names a view progress timeline Spec
view-timeline-axis Sets view timeline axis Spec
view-timeline-inset Adjusts view timeline start/end points Spec
timeline-scope Declares scope of named timelines Spec
view-transition-name Names element for view transitions Spec
view-transition-class Adds classes to view transition pseudo-elements Spec

Visual Effects

Property Description Links
box-shadow Adds shadow to element box Demo Spec
filter Applies visual effects (blur, brightness, contrast, etc.) Demo Spec
backdrop-filter Applies filter effects to backdrop Demo Spec
mix-blend-mode Blends element with backdrop Demo Spec
clip-path Clips element to specific shape Demo Spec
mask Shorthand for mask properties Demo Spec
mask-image Sets mask layer image Spec
mask-size Sets mask layer size Spec
mask-position Sets mask layer position Spec

Lists & Tables

Property Description Links
list-style Shorthand for list-style properties Spec
list-style-type Sets list item marker type Spec
list-style-position Sets marker position (inside, outside) Spec
list-style-image Sets custom marker image Spec
table-layout Controls table layout algorithm Spec
caption-side Sets table caption position Spec
empty-cells Controls display of empty table cells Spec

User Interface

Property Description Links
cursor Sets cursor style Spec
pointer-events Controls pointer interaction Spec
user-select Controls text selection Spec
resize Controls element resizability Spec
scroll-behavior Controls scroll behavior (smooth, auto) Spec
scroll-margin Sets scroll snap margin Spec
scroll-padding Sets scroll snap padding Spec
scroll-snap-type Defines scroll snap behavior Spec
scroll-snap-align Sets snap alignment Spec
scroll-snap-stop Controls scroll snap stopping Spec
overscroll-behavior Controls overscroll behavior Spec
touch-action Controls touch gesture behavior Spec
caret-color Sets text input caret color Spec
accent-color Sets accent color for form controls Spec
appearance Controls native appearance of UI controls Spec
scrollbar-width Sets scrollbar width (auto, thin, none) Spec
scrollbar-color Sets scrollbar thumb and track colors Spec
scrollbar-gutter Reserves space for scrollbar gutter Spec
field-sizing Controls form field sizing behavior CSS UI 4

Multi-Column Layout

Property Description Links
columns Shorthand for column-width and column-count Spec
column-count Sets number of columns Spec
column-width Sets optimal column width Spec
column-gap Sets gap between columns Spec
column-rule Shorthand for column-rule properties Spec
column-rule-width Sets column rule width Spec
column-rule-style Sets column rule style Spec
column-rule-color Sets column rule color Spec
column-span Controls column spanning Spec
column-fill Controls column balance Spec
break-before Controls page/column break before element Spec
break-after Controls page/column break after element Spec
break-inside Controls page/column break inside element Spec
orphans Minimum lines at bottom of page/column before break Spec
widows Minimum lines at top of page/column after break Spec

Container Queries

Property Description Links
container Shorthand for container-type and container-name Spec
container-type Establishes element as query container Spec
container-name Names a query container Spec

Custom Properties & Functions

Property Description Links
--custom-property Defines custom CSS variable Spec
var() Uses custom property value Spec
calc() Performs calculations Spec
min() Returns minimum value Spec
max() Returns maximum value Spec
clamp() Clamps value between min and max Spec

Generated Content

Property Description Links
content Generates content with ::before/::after Spec
counter-reset Creates or resets counter Spec
counter-increment Increments counter value Spec
quotes Sets quotation marks for content Spec

Resources & Tools

Demo