CSS Properties Cheat Sheet

• color - Sets text color
• font-family - Specifies font face
• font-size - Sets text size
• font-weight - Controls boldness (normal/bold/100-900)
• font-style - Sets italic/normal/oblique
• font-variant - Small-caps/normal
• font-stretch - Condensed/expanded font faces
• line-height - Space between lines
• letter-spacing - Space between characters
• word-spacing - Space between words
• text-align - Text alignment (left/right/center/justify)
• text-decoration - Underline/overline/line-through
• text-transform - Uppercase/lowercase/capitalize
• text-indent - First line indentation
• text-shadow - Adds shadow to text
• text-overflow - How overflowed text is handled
• white-space - How whitespace is handled
• word-break - Line breaking rules
• word-wrap - Allows long words to break
• direction - Text direction (ltr/rtl)
• unicode-bidi - For bidirectional text
• writing-mode - Horizontal/vertical text flow
• text-orientation - Orientation of text characters
• font-feature-settings - Advanced typographic features
• font-kerning - Kerning control
• font-language-override - Language-specific glyphs
• font-size-adjust - Preserves readability when fonts fallback
• font-synthesis - Controls faux bold/italic
• text-emphasis - Emphasis marks on text
• text-underline-position - Position of underline

Box Model & Layout (28 properties)

• width - Element width
• height - Element height
• min-width - Minimum width
• max-width - Maximum width
• min-height - Minimum height
• max-height - Maximum height
• margin - Outer spacing (shorthand)
• margin-top - Top margin
• margin-right - Right margin
• margin-bottom - Bottom margin
• margin-left - Left margin
• padding - Inner spacing (shorthand)
• padding-top - Top padding
• padding-right - Right padding
• padding-bottom - Bottom padding
• padding-left - Left padding
• border - Border shorthand
• border-width - Border thickness
• border-style - Border line style
• border-color - Border color
• border-radius - Rounds corners
• box-shadow - Adds shadow effects
• box-sizing - Box model calculation method
• outline - Outline around elements
• outline-width - Outline thickness
• outline-style - Outline line style
• outline-color - Outline color
• outline-offset - Space between outline and border

Positioning & Display (17 properties)

• display - Display behavior (block/inline/flex/etc)
• position - Positioning method
• top - Top position offset
• right - Right position offset
• bottom - Bottom position offset
• left - Left position offset
• float - Element floating
• clear - Side(s) to stop floating
• z-index - Stacking order
• visibility - Element visibility
• overflow - Overflow behavior
• overflow-x - Horizontal overflow
• overflow-y - Vertical overflow
• clip - Clips absolutely positioned elements
• resize - User resizable elements
• cursor - Mouse cursor appearance
• pointer-events - How element reacts to pointer events

Text & Font Properties (30 properties)

• color - Sets text color
• font-family - Specifies font face

Box Model & Layout (28 properties)

• width - Element width
• height - Element height

Positioning & Display (17 properties)

• display - Display behavior (block/inline/flex/etc)
• position - Positioning method

Flexbox Properties (12 properties)

• flex-direction - Main axis direction
• flex-wrap - Single/multi-line flex
• flex-flow - flex-direction + flex-wrap shorthand
• justify-content - Main axis alignment
• align-items - Cross axis alignment
• align-content - Multi-line alignment
• order - Visual order of flex items
• flex-grow - Ability to grow if needed
• flex-shrink - Ability to shrink if needed
• flex-basis - Default size before remaining space
• flex - flex-grow + flex-shrink + flex-basis shorthand
• align-self - Override align-items for individual items

Grid Properties (26 properties)

• grid-template-columns - Column track sizes
• grid-template-rows - Row track sizes
• grid-template-areas - Named grid areas
• grid-template - Shorthand for rows/columns/areas
• grid-column-gap - Gap between columns
• grid-row-gap - Gap between rows
• grid-gap - Shorthand for row/column gaps
• justify-items - Default justify-self for all items
• align-items - Default align-self for all items
• place-items - align-items + justify-items shorthand
• justify-content - Grid container alignment
• align-content - Grid container alignment
• place-content - align-content + justify-content shorthand
• grid-auto-columns - Size of implicitly created columns
• grid-auto-rows - Size of implicitly created rows
• grid-auto-flow - Auto-placement algorithm
• grid - Most grid properties shorthand
• grid-column-start - Start position within grid
• grid-column-end - End position within grid
• grid-row-start - Start position within grid
• grid-row-end - End position within grid
• grid-column - Shorthand for start/end columns
• grid-row - Shorthand for start/end rows
• grid-area - Shorthand for grid placement
• justify-self - Alignment within grid cell
• align-self - Alignment within grid cell
• place-self - align-self + justify-self shorthand

Background & Borders (37 properties)

• background-color - Background color
• background-image - Background image(s)
• background-repeat - How images repeat
• background-position - Starting position
• background-size - Size of background image
• background-attachment - Scroll/fixed behavior
• background-origin - Positioning area
• background-clip - Painting area
• background - Shorthand for all background properties
• border-top - Top border shorthand
• border-right - Right border shorthand
• border-bottom - Bottom border shorthand
• border-left - Left border shorthand
• border-top-width - Top border width
• border-right-width - Right border width
• border-bottom-width - Bottom border width
• border-left-width - Left border width
• border-top-style - Top border style
• border-right-style - Right border style
• border-bottom-style - Bottom border style
• border-left-style - Left border style
• border-top-color - Top border color
• border-right-color - Right border color
• border-bottom-color - Bottom border color
• border-left-color - Left border color
• border-radius - Rounded corners
• border-top-left-radius - Top-left corner radius
• border-top-right-radius - Top-right corner radius
• border-bottom-right-radius - Bottom-right corner radius
• border-bottom-left-radius - Bottom-left corner radius
• border-image - Image as border
• border-image-source - Image source
• border-image-slice - How to slice border image
• border-image-width - Border image width
• border-image-outset - Amount border image extends
• border-image-repeat - How border image is repeated
• box-decoration-break - Behavior of borders at edges

Transitions & Animations (14 properties)

• transition - Shorthand transition property
• transition-property - Properties to transition
• transition-duration - Transition duration
• transition-timing-function - Speed curve
• transition-delay - Delay before transition
• animation - Shorthand animation property
• animation-name - @keyframes name
• animation-duration - Animation duration
• animation-timing-function - Speed curve
• animation-delay - Delay before animation
• animation-iteration-count - Repeat count
• animation-direction - Normal/reverse/alternate
• animation-fill-mode - Styles before/after animation
• animation-play-state - Running/paused state

Transforms (6 properties)

• transform - 2D/3D transformations
• transform-origin - Transformation origin point
• transform-style - How nested elements are rendered
• perspective - Perspective for 3D transforms
• perspective-origin - Perspective origin point
• backface-visibility - Visibility of back face

Multi-column Layout (10 properties)

• column-count - Number of columns
• column-width - Ideal column width
• columns - column-count + column-width shorthand
• column-gap - Gap between columns
• column-rule - Rule between columns
• column-rule-width - Rule width
• column-rule-style - Rule style
• column-rule-color - Rule color
• column-span - How elements span columns
• column-fill - How columns are filled

Lists & Tables (9 properties)

• list-style - List style shorthand
• list-style-type - List item marker type
• list-style-position - Marker position
• list-style-image - Custom marker image
• table-layout - Table sizing algorithm
• border-collapse - Borders collapse or separate
• border-spacing - Distance between borders
• caption-side - Table caption position
• empty-cells - Show/hide empty cells

Miscellaneous (25 properties)

• opacity - Element transparency
• filter - Visual effects (blur, contrast, etc.)
• mix-blend-mode - Blending with background
• isolation - Creates new stacking context
• object-fit - How replaced content fits
• object-position - Position of replaced content
• will-change - Hints about future changes
• clip-path - Clips element to shape
• mask - Masks element
• mask-image - Mask image source
• mask-mode - Masking mode
• mask-position - Mask position
• mask-size - Mask size
• mask-repeat - How mask repeats
• mask-origin - Mask positioning area
• mask-clip - Mask painting area
• mask-composite - How masks composite
• backdrop-filter - Filters behind element
• touch-action - How touchscreen interacts
• scroll-behavior - Smooth scrolling
• overscroll-behavior - Scroll chaining
• caret-color - Text cursor color
• appearance - Platform-native styling
• user-select - Text selection behavior
• all - Resets all properties