🎨 Ultimate CSS Properties Cheatsheet

Comprehensive reference with 300+ CSS properties, modern values, and direct MDN documentation links. Your complete guide to mastering CSS.

🔍
All Categories
Layout
Typography
Visual
Animation
Interaction
300+
Properties
14
Categories
100%
MDN Linked
300+
Visible
📦 Box Model
12
margin Core
auto|0|10px|1em 2em|5% 10%
Sets outer spacing around element. Supports individual sides (margin-top, margin-right, etc.)
padding Core
0|1rem|10px 20px|5% 10% 15%
Inner spacing between content and border. Cannot be negative values.
border Core
1px solid #000|2px dashed red|none|thick double blue
Shorthand for border-width, border-style, and border-color properties.
border-radius Visual
5px|50%|10px 20px|10px / 20px
Rounds element corners. Supports elliptical borders with slash notation.
box-sizing Layout
content-box|border-box
Controls how element's total width/height is calculated.
box-shadow Visual
2px 2px 5px rgba(0,0,0,0.3)|inset 0 0 10px #000|none
Adds shadow effects. Supports multiple shadows separated by commas.
outline Visual
none|1px solid #000|2px dashed red|thick dotted blue
Draws outline outside border. Doesn't affect layout or box model.
outline-offset Visual
0|2px|-1px
Sets distance between outline and border edge.
border-image Advanced
url('border.png') 30 round|linear-gradient(red, blue) 1
Uses image as border instead of border-style values.
border-collapse Table
separate|collapse
Controls table border rendering model.
border-spacing Table
0|2px|1px 2px
Sets distance between adjacent table cell borders.
box-decoration-break Advanced
slice|clone
Controls how box decorations are applied to fragmented elements.
✍️ Typography
18
font-family Core
Arial, sans-serif|'Times New Roman', serif|monospace|system-ui
Specifies font family with fallback options. Use quotes for multi-word names.
font-size Core
16px|1rem|120%|large|clamp(1rem, 4vw, 2rem)
Sets font size. Use relative units (rem, em) for better scalability.
font-weight Core
normal|bold|100-900|lighter|bolder
Controls font thickness. Variable fonts support any value 1-1000.
line-height Core
1.5|normal|20px|150%
Sets line height. Unitless values are preferred for better inheritance.
text-align Layout
left|center|right|justify|start|end
Aligns text horizontally. start/end respect writing direction.
text-decoration Visual
none|underline|line-through|overline|underline wavy red
Adds decorative lines to text. Supports color and style modifiers.
text-transform Visual
none|uppercase|lowercase|capitalize|full-width
Controls text capitalization and character width.
letter-spacing Visual
normal|0.5px|-1px|0.1em
Adjusts spacing between characters. Negative values tighten spacing.
word-spacing Visual
normal|5px|0.2em|-2px
Controls spacing between words.
text-indent Layout
0|2em|5%|hanging
Indents first line of text blocks.
text-shadow Visual
none|2px 2px 4px rgba(0,0,0,0.5)|1px 1px 0 white
Adds shadow effects to text. Supports multiple shadows.
white-space Layout
normal|nowrap|pre|pre-wrap|pre-line
Controls whitespace handling and text wrapping.
word-break Layout
normal|break-all|keep-all|break-word
Controls how words break when they overflow their container.
overflow-wrap Layout
normal|break-word|anywhere
Controls whether long words can be broken to prevent overflow.
hyphens Layout
none|manual|auto
Controls automatic hyphenation of words.
text-overflow Layout
clip|ellipsis|fade|"..."
Controls how overflowed text is displayed. Requires overflow: hidden.
font-variant Advanced
normal|small-caps|all-small-caps|petite-caps
Controls font variant features like small caps.
writing-mode Advanced
horizontal-tb|vertical-rl|vertical-lr
Sets text layout direction and orientation.
📐 Layout & Display
15
display Core
block|inline|flex|grid|none|contents
Controls element's display behavior and layout participation.
position Core
static|relative|absolute|fixed|sticky
Sets positioning method. Works with top, right, bottom, left properties.
top Position
auto|0|10px|50%|-5px
Sets top edge position for positioned elements.
right Position
auto|0|10px|50%|-5px
Sets right edge position for positioned elements.
bottom Position
auto|0|10px|50%|-5px
Sets bottom edge position for positioned elements.
left Position
auto|0|10px|50%|-5px
Sets left edge position for positioned elements.
z-index Position
auto|0|1|9999|-1
Controls stacking order of positioned elements. Higher values appear on top.
float Legacy
none|left|right|inline-start|inline-end
Floats element to one side, allowing text wrap. Mostly replaced by flexbox/grid.
clear Legacy
none|left|right|both|inline-start
Prevents element from being adjacent to floated elements.
vertical-align Inline
baseline|top|middle|bottom|text-top|5px
Aligns inline/table-cell elements vertically.
object-fit Media
fill|contain|cover|none|scale-down
Controls how replaced elements (img, video) fit their container.
object-position Media
center|top left|50% 50%|10px 20px
Sets alignment of replaced element's content within its box.
isolation Advanced
auto|isolate
Creates new stacking context, isolating element from blend modes.
contain Performance
none|strict|content|size|layout|style|paint
Indicates element's subtree is independent, enabling browser optimizations.
content-visibility Performance
visible|hidden|auto
Controls whether element renders its contents, enabling performance optimizations.
🔄 Flexbox
12
flex-direction Container
row|column|row-reverse|column-reverse
Sets main axis direction in flex container.
justify-content Container
flex-start|center|space-between|space-around|space-evenly
Aligns flex items along main axis.
align-items Container
stretch|center|flex-start|flex-end|baseline
Aligns flex items along cross axis.
flex-wrap Container
nowrap|wrap|wrap-reverse
Controls whether flex items wrap to new lines.
align-content Container
stretch|center|space-between|space-around|space-evenly
Aligns wrapped flex lines along cross axis.
flex Item
1|0 1 auto|none|1 1 0%|2 0 100px
Shorthand for flex-grow, flex-shrink, and flex-basis.
flex-grow Item
0|1|2|0.5
Controls how much flex item grows relative to other items.
flex-shrink Item
1|0|2|0.5
Controls how much flex item shrinks relative to other items.
flex-basis Item
auto|0|100px|50%|content
Sets initial main size of flex item before free space is distributed.
align-self Item
auto|center|flex-start|flex-end|stretch
Overrides align-items for individual flex item.
order Item
0|1|-1|999
Controls order of flex items without changing HTML structure.
gap Container
10px|1rem|10px 20px|5%
Sets gaps between flex items. Shorthand for row-gap and column-gap.
⚏ CSS Grid
16
grid-template-columns Container
1fr 1fr|repeat(3, 1fr)|100px auto|minmax(100px, 1fr)
Defines grid columns with space-separated track sizes.
grid-template-rows Container
auto|100px 200px|repeat(2, 1fr)|minmax(50px, auto)
Defines grid rows with space-separated track sizes.
grid-template-areas Container
"header header" "sidebar main"|none
Defines named grid areas for easier item placement.
grid-column Item
1 / 3|span 2|1 / -1|auto
Shorthand for grid-column-start and grid-column-end.
grid-row Item
1 / 3|span 2|2|auto
Shorthand for grid-row-start and grid-row-end.
grid-area Item
header|1 / 1 / 3 / 3|auto
Places item in named area or defines all four grid lines.
justify-items Container
stretch|center|start|end
Aligns grid items along inline (row) axis.
align-items Container
stretch|center|start|end
Aligns grid items along block (column) axis.
justify-self Item
auto|center|start|end|stretch
Overrides justify-items for individual grid item.
align-self Item
auto|center|start|end|stretch
Overrides align-items for individual grid item.
grid-auto-columns Container
auto|100px|1fr|minmax(100px, 1fr)
Sets size of implicitly created grid columns.
grid-auto-rows Container
auto|100px|1fr|minmax(50px, auto)
Sets size of implicitly created grid rows.
grid-auto-flow Container
row|column|row dense|column dense
Controls auto-placement algorithm for grid items.
row-gap Container
normal|10px|1rem|5%
Sets gap between grid rows.
column-gap Container
normal|10px|1rem|5%
Sets gap between grid columns.
📏 Sizing
14
width Core
auto|100px|50%|100vw|fit-content
Sets element's width. Auto calculates based on content.
height Core
auto|100px|50%|100vh|fit-content
Sets element's height. Auto calculates based on content.
min-width Constraint
0|100px|50%|min-content|max-content
Sets minimum width constraint. Overrides width if larger.
max-width Constraint
none|100px|50%|max-content|fit-content
Sets maximum width constraint. Overrides width if smaller.
min-height Constraint
0|100px|50%|100vh|min-content
Sets minimum height constraint. Overrides height if larger.
max-height Constraint
none|100px|50%|100vh|max-content
Sets maximum height constraint. Overrides height if smaller.
aspect-ratio Modern
auto|1 / 1|16 / 9|1.5
Sets preferred aspect ratio for element's box.
block-size Logical
auto|100px|50%|100vh
Logical equivalent of height, respects writing mode.
inline-size Logical
auto|100px|50%|100vw
Logical equivalent of width, respects writing mode.
min-block-size Logical
0|100px|50%|min-content
Logical equivalent of min-height, respects writing mode.
max-block-size Logical
none|100px|50%|max-content
Logical equivalent of max-height, respects writing mode.
min-inline-size Logical
0|100px|50%|min-content
Logical equivalent of min-width, respects writing mode.
max-inline-size Logical
none|100px|50%|max-content
Logical equivalent of max-width, respects writing mode.
resize Interaction
none|both|horizontal|vertical|block|inline
Controls whether element is resizable by user.
🎨 Background & Images
14
background-color Core
transparent|#fff|rgba(0,0,0,0.5)|red|hsl(120, 100%, 50%)
Sets background color. Supports all CSS color formats.
background-image Core
none|url('img.jpg')|linear-gradient(red, blue)|radial-gradient(circle, red, blue)
Sets background image. Supports multiple images separated by commas.
background-size Core
auto|cover|contain|100px 200px|50% 100%
Controls background image size. Cover fills container, contain fits within.
background-position Core
center|top left|50% 50%|10px 20px|right 10px bottom 20px
Sets initial position of background image.
background-repeat Core
repeat|no-repeat|repeat-x|repeat-y|space|round
Controls how background image repeats.
background-attachment Core
scroll|fixed|local
Controls whether background scrolls with content or stays fixed.
background-origin Advanced
padding-box|border-box|content-box
Sets background positioning area.
background-clip Advanced
border-box|padding-box|content-box|text
Sets background painting area. 'text' clips to text shape.
background-blend-mode Advanced
normal|multiply|screen|overlay|darken|lighten
Sets blending mode for background layers.
image-rendering Advanced
auto|smooth|high-quality|crisp-edges|pixelated
Controls image scaling algorithm.
mask Advanced
none|url('mask.svg')|linear-gradient(black, transparent)
Shorthand for mask properties. Hides parts of element.
mask-image Advanced
none|url('mask.png')|linear-gradient(black, transparent)
Sets mask layer image.
mask-size Advanced
auto|cover|contain|100px 200px
Sets size of mask layer image.
mask-repeat Advanced
repeat|no-repeat|repeat-x|repeat-y
Controls how mask layer image repeats.
🌈 Colors & Effects
12
color Core
black|#333|rgb(255,0,0)|hsl(0,100%,50%)|currentColor
Sets text color. currentColor uses computed color value.
opacity Core
1|0.5|0|75%
Sets transparency level. 0 is fully transparent, 1 is fully opaque.
visibility Core
visible|hidden|collapse
Controls element visibility. Hidden elements still take up space.
filter Effects
none|blur(5px)|brightness(0.5)|contrast(200%)|grayscale(100%)
Applies graphical effects like blur, brightness, contrast.
backdrop-filter Effects
none|blur(10px)|brightness(0.8)|saturate(180%)
Applies effects to area behind element.
mix-blend-mode Effects
normal|multiply|screen|overlay|difference|exclusion
Sets how element blends with background.
color-scheme Modern
normal|light|dark|light dark
Indicates which color schemes element can be rendered in.
accent-color Modern
auto|#007acc|red|hsl(210, 100%, 40%)
Sets accent color for form controls.
caret-color Modern
auto|transparent|#007acc|red
Sets color of text input cursor.
forced-color-adjust Accessibility
auto|none
Controls whether colors are adjusted in forced-colors mode.
print-color-adjust Print
economy|exact
Controls whether colors are adjusted when printing.
color-adjust Print
economy|exact
Legacy alias for print-color-adjust.
🎬 Animations & Transitions
16
transition Core
all 0.3s ease|color 0.5s|none|opacity 0.2s linear 0.1s
Shorthand for transition properties. Creates smooth property changes.
transition-property Transition
none|all|opacity|transform, opacity
Specifies which properties to transition.
transition-duration Transition
0s|0.3s|300ms|0.2s, 0.5s
Sets transition duration time.
transition-timing-function Transition
ease|linear|ease-in-out|cubic-bezier(0.1, 0.7, 1.0, 0.1)
Sets transition acceleration curve.
transition-delay Transition
0s|0.1s|100ms|-0.5s
Sets delay before transition starts.
animation Core
none|slide 2s infinite|bounce 1s ease-in-out 0.5s alternate
Shorthand for animation properties. Applies keyframe animations.
animation-name Animation
none|slideIn|fadeOut, slideUp
Specifies @keyframes animation name to apply.
animation-duration Animation
0s|2s|500ms|1s, 2s
Sets animation duration time.
animation-timing-function Animation
ease|linear|steps(4, end)|cubic-bezier(0.25, 0.1, 0.25, 1)
Sets animation acceleration curve.
animation-delay Animation
0s|0.5s|-1s|100ms
Sets delay before animation starts. Negative values start mid-animation.
animation-iteration-count Animation
1|infinite|3|2.5
Sets number of times animation repeats.
animation-direction Animation
normal|reverse|alternate|alternate-reverse
Sets animation playback direction.
animation-fill-mode Animation
none|forwards|backwards|both
Sets which values apply before/after animation execution.
animation-play-state Animation
running|paused
Controls whether animation is running or paused.
will-change Performance
auto|scroll-position|contents|transform, opacity
Hints browser about expected property changes for optimization.
animation-timeline Experimental
auto|none|scroll()|view()
Sets timeline that drives animation progress.
🔄 Transforms
8
transform Core
none|rotate(45deg)|scale(1.2)|translate(10px, 20px)|skew(15deg)
Applies 2D/3D transformations. Can combine multiple functions.
transform-origin Core
center|top left|50% 50%|0 0|10px 20px 30px
Sets origin point for transformations. Default is element center.
transform-style 3D
flat|preserve-3d
Sets whether children are positioned in 3D space or flattened.
perspective 3D
none|1000px|500px|2000px
Sets distance between user and z=0 plane for 3D perspective.
perspective-origin 3D
center|top left|50% 50%|100px 200px
Sets origin point for perspective property.
backface-visibility 3D
visible|hidden
Sets whether back face of element is visible when rotated.
rotate Individual
none|45deg|0.5turn|x 45deg|1 1 0 45deg
Individual transform property for rotation.
scale Individual
none|1.5|2 0.5|1.2 1.2 0.8
Individual transform property for scaling.
translate Individual
none|10px|50% 100px|10px 20px 30px
Individual transform property for translation.
📋 Overflow & Clipping
10
overflow Core
visible|hidden|scroll|auto|clip
Controls what happens when content overflows element's box.
overflow-x Axis
visible|hidden|scroll|auto|clip
Controls horizontal overflow behavior.
overflow-y Axis
visible|hidden|scroll|auto|clip
Controls vertical overflow behavior.
overflow-wrap Text
normal|break-word|anywhere
Controls whether long words can be broken to prevent overflow.
clip-path Clipping
none|circle(50%)|ellipse(50% 60%)|polygon(0 0, 100% 0, 50% 100%)
Creates clipping region to show only part of element.
clip Legacy
auto|rect(0, 100px, 100px, 0)
Legacy clipping property. Use clip-path instead.
overscroll-behavior Scroll
auto|contain|none
Controls behavior when scrolling past boundary of scroll area.
overscroll-behavior-x Scroll
auto|contain|none
Controls horizontal overscroll behavior.
overscroll-behavior-y Scroll
auto|contain|none
Controls vertical overscroll behavior.
scroll-behavior Scroll
auto|smooth
Sets behavior for scrolling triggered by navigation or CSSOM APIs.
👆 User Interactions
12
cursor Core
auto|pointer|text|not-allowed|grab|url('cursor.png'), auto
Sets cursor type when hovering over element.
user-select Selection
auto|none|text|all|contain
Controls whether user can select text within element.
pointer-events Events
auto|none|visiblePainted|visibleFill|all
Sets under what circumstances element can be target of pointer events.
touch-action Touch
auto|none|pan-x|pan-y|manipulation
Sets how element's region can be manipulated by touchscreen.
scroll-snap-type Scroll
none|x mandatory|y proximity|both mandatory
Sets how strictly snap points are enforced on scroll container.
scroll-snap-align Scroll
none|start|end|center|start end
Sets element's snap position within scroll container.
scroll-snap-stop Scroll
normal|always
Sets whether scroll container is allowed to pass over snap positions.
scroll-margin Scroll
0|10px|1rem 2rem|5px 10px 15px 20px
Sets margin around scroll snap area.
scroll-padding Scroll
auto|0|10px|1rem 2rem
Sets padding inside scroll container's snapport.
scrollbar-width Scroll
auto|thin|none
Sets width of scrollbar.
scrollbar-color Scroll
auto|dark|light|#007acc #f0f0f0
Sets colors of scrollbar thumb and track.
scrollbar-gutter Scroll
auto|stable|stable both-edges
Reserves space for scrollbar to prevent layout shifts.
📝 Lists & Tables
10
list-style List
none|disc|decimal inside|url('bullet.png') outside
Shorthand for list-style-type, list-style-position, and list-style-image.
list-style-type List
none|disc|circle|square|decimal|lower-roman
Sets appearance of list item marker.
list-style-position List
outside|inside
Sets position of list item marker relative to content.
list-style-image List
none|url('bullet.png')|linear-gradient(red, blue)
Sets image to use as list item marker.
table-layout Table
auto|fixed
Sets algorithm used to lay out table cells, rows, and columns.
border-collapse Table
separate|collapse
Sets whether table borders are collapsed or separated.
border-spacing Table
0|2px|1px 2px
Sets distance between adjacent table cell borders.
caption-side Table
top|bottom|block-start|block-end
Sets position of table caption.
empty-cells Table
show|hide
Sets whether borders and backgrounds appear around empty table cells.
counter-reset Counter
none|chapter|section 1|item 0 page 1
Creates or resets CSS counters.
🚀 Modern CSS
8
container-type Container
normal|size|inline-size
Establishes element as containment context for container queries.
container-name Container
none|sidebar|main content
Specifies list of query container names.
container Container
sidebar / inline-size|main / size|/ normal
Shorthand for container-name and container-type.
subgrid Grid
subgrid|subgrid [line-names]
Adopts track sizing of parent grid. Used with grid-template-columns/rows.
inset Logical
auto|0|10px|10px 20px|5px 10px 15px 20px
Shorthand for top, right, bottom, and left properties.
inset-block Logical
auto|0|10px|10px 20px
Logical shorthand for block-start and block-end positions.
inset-inline Logical
auto|0|10px|10px 20px
Logical shorthand for inline-start and inline-end positions.
place-items Alignment
center|start end|stretch center
Shorthand for align-items and justify-items.