CSS Properties Cheat Sheet
Complete CSS reference for Flexbox, Grid, animations, transitions, and modern CSS features. Copy-ready syntax with examples.
Layout
| Property | Description | Example |
|---|---|---|
| Set display type | display: flex; | |
| Set positioning method | position: relative; | |
| Offset positioned elements | top: 0; left: 50%; | |
| Stack order of elements | z-index: 10; | |
| Float element left or right | float: left; | |
| Clear floated elements | clear: both; | |
| Handle content overflow | overflow: hidden; | |
| Overflow per axis | overflow-x: auto; | |
| Show/hide without removing | visibility: hidden; | |
| Element transparency | opacity: 0.5; | |
| How replaced content fits | object-fit: cover; | |
| Position of replaced content | object-position: center top; |
Flexbox
| Property | Description | Example |
|---|---|---|
| Enable flexbox container | display: flex; | |
| Direction of flex items | flex-direction: column; | |
| Allow items to wrap | flex-wrap: wrap; | |
| Align items on main axis | justify-content: space-between; | |
| Align items on cross axis | align-items: center; | |
| Override alignment for one item | align-self: flex-end; | |
| How much item grows | flex-grow: 1; | |
| How much item shrinks | flex-shrink: 0; | |
| Initial size of flex item | flex-basis: 200px; | |
| Shorthand for grow/shrink/basis | flex: 1 0 auto; | |
| Space between flex/grid items | gap: 16px; | |
| Visual order of flex item | order: -1; | |
| Align wrapped lines | align-content: center; |
Grid
| Property | Description | Example |
|---|---|---|
| Enable grid container | display: grid; | |
| Define column tracks | grid-template-columns: 1fr 2fr 1fr; | |
| Define row tracks | grid-template-rows: auto 1fr auto; | |
| Span columns | grid-column: 1 / 3; | |
| Span rows | grid-row: 1 / -1; | |
| Place item in named area | grid-area: header; | |
| Define named grid areas | grid-template-areas: 'header header'; | |
| Auto-placement algorithm | grid-auto-flow: dense; | |
| Size of auto-created columns | grid-auto-columns: minmax(0, 1fr); | |
| Shorthand for align + justify items | place-items: center; | |
| Shorthand for align + justify content | place-content: center; | |
| Repeat track definitions | grid-template-columns: repeat(3, 1fr); | |
| Set min and max size | minmax(200px, 1fr) |
Typography
| Property | Description | Example |
|---|---|---|
| Set typeface | font-family: 'Inter', sans-serif; | |
| Set text size | font-size: 1.25rem; | |
| Set text boldness | font-weight: 600; | |
| Italic or normal | font-style: italic; | |
| Space between lines | line-height: 1.6; | |
| Space between characters | letter-spacing: 0.05em; | |
| Horizontal text alignment | text-align: center; | |
| Underline, strikethrough, etc. | text-decoration: underline; | |
| Uppercase, lowercase, capitalize | text-transform: uppercase; | |
| How whitespace is handled | white-space: nowrap; | |
| How words break | word-break: break-word; | |
| How overflowing text displays | text-overflow: ellipsis; | |
| Indent first line | text-indent: 2em; | |
| Numeric glyph variants | font-variant-numeric: tabular-nums; |
Colors
| Property | Description | Example |
|---|---|---|
| Set text color | color: #333; | |
| Set background color | background-color: hsl(220, 15%, 95%); | |
| Set background image | background-image: url('bg.jpg'); | |
| Size of background | background-size: cover; | |
| Position of background | background-position: center; | |
| Repeat background pattern | background-repeat: no-repeat; | |
| Shorthand for all bg properties | background: #f0f0f0 url() center/cover; | |
| Create gradient background | background: linear-gradient(135deg, #667eea, #764ba2); | |
| Radial gradient background | background: radial-gradient(circle, #fff, #000); |
Spacing
| Property | Description | Example |
|---|---|---|
| Outer spacing | margin: 16px auto; | |
| Inner spacing | padding: 24px 32px; | |
| Set element width | width: 100%; | |
| Set element height | height: 100vh; | |
| Width constraints | max-width: 1200px; | |
| Height constraints | min-height: 100vh; | |
| Include padding in width | box-sizing: border-box; | |
| Maintain width/height ratio | aspect-ratio: 16 / 9; |
Borders
| Property | Description | Example |
|---|---|---|
| Set border shorthand | border: 1px solid #ddd; | |
| Round corners | border-radius: 8px; | |
| Border thickness | border-width: 2px; | |
| Border color | border-color: hsl(220, 20%, 80%); | |
| Solid, dashed, dotted, etc. | border-style: dashed; | |
| Outline (doesn't affect layout) | outline: 2px solid blue; | |
| Drop shadow | box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| Shadow on text | text-shadow: 0 2px 4px rgba(0,0,0,0.3); |
Animations
| Property | Description | Example |
|---|---|---|
| Animate property changes | transition: all 0.3s ease; | |
| Which properties to animate | transition-property: transform, opacity; | |
| Animation duration | transition-duration: 300ms; | |
| Easing curve | transition-timing-function: ease-in-out; | |
| Apply keyframe animation | animation: fadeIn 0.5s ease forwards; | |
| Delay before animation | animation-delay: 200ms; | |
| How many times to repeat | animation-iteration-count: infinite; | |
| Define animation keyframes | @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } |
Transforms
| Property | Description | Example |
|---|---|---|
| Move element | transform: translateX(-50%); | |
| Scale element | transform: scale(1.1); | |
| Rotate element | transform: rotate(45deg); | |
| Skew element | transform: skewX(10deg); | |
| Set transform pivot point | transform-origin: top left; | |
| 3D perspective depth | perspective: 800px; |
Responsive
| Property | Description | Example |
|---|---|---|
| Responsive breakpoints | @media (min-width: 768px) { ... } | |
| Responsive value with min/max | font-size: clamp(1rem, 2.5vw, 2rem); | |
| Use smaller of two values | width: min(100%, 600px); | |
| Use larger of two values | width: max(300px, 50%); | |
| Calculate values | width: calc(100% - 32px); | |
| Style based on container size | @container (min-width: 400px) { ... } |
Modern
| Property | Description | Example |
|---|---|---|
| Parent selector | div:has(> img) { padding: 0; } | |
| Selector grouping | :is(h1, h2, h3) { color: navy; } | |
| Style form control accents | accent-color: #4f46e5; | |
| Support light/dark mode | color-scheme: light dark; | |
| Smooth scrolling | scroll-behavior: smooth; | |
| Snap scrolling | scroll-snap-type: x mandatory; | |
| Filter behind element | backdrop-filter: blur(10px); | |
| Blend with background | mix-blend-mode: multiply; | |
| Create stacking context | isolation: isolate; |
Frequently asked questions
What's the difference between Flexbox and Grid?
Flexbox is one-dimensional - it handles either a row or a column. Grid is two-dimensional - it handles rows AND columns simultaneously. Use Flexbox for navbars, card rows, and centering. Use Grid for full page layouts, dashboards, and complex arrangements.
When should I use rem vs px vs em?
Use rem for font sizes and spacing - it scales with the user's browser settings (accessibility). Use px for borders, shadows, and things that shouldn't scale. Use em sparingly, mainly for padding relative to font-size (like button padding).
How do I center a div?
Flexbox: display: flex; justify-content: center; align-items: center. Grid: display: grid; place-items: center. Position: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). Flexbox is usually the cleanest approach.
What does box-sizing: border-box do?
By default, width: 200px means 200px for content only - padding and borders are added on top. With border-box, width: 200px includes everything. Set it globally with *, *::before, *::after { box-sizing: border-box; }.
How do I make text overflow show ellipsis?
You need three properties together: white-space: nowrap; overflow: hidden; text-overflow: ellipsis. For multi-line truncation, use -webkit-line-clamp with display: -webkit-box.
What are CSS custom properties (variables)?
Define variables in :root { --color: #333; } and use them anywhere: color: var(--color). They cascade, can be overridden in child elements, and can be changed with JavaScript - making them perfect for theming and dark mode.
Go from reference to real skills
Cheat sheets are great for quick lookups. Our in-depth courses take you from the fundamentals to professional-level mastery.
Browse all courses