CSS is the visual language of the web. Every color, spacing decision, layout structure, and animation on a webpage is controlled by CSS properties. Yet even experienced developers pause to recall the exact syntax for grid-template-areas, the difference between align-items and align-content, or which transform functions accept percentage values. During code reviews, technical interviews, and daily frontend work, developers constantly search for CSS property syntax and behavior. Our free interactive CSS properties cheat sheet eliminates this friction. It organizes over two hundred properties into searchable categories, provides concise syntax references, live code examples, and clear labels for browser support. Everything runs client-side in your browser — no data ever leaves your machine.
Why Developers Need a CSS Properties Cheat Sheet
CSS has grown from a simple styling language into a powerful layout and animation system. The specification now includes hundreds of properties across dozens of modules: Flexbox, Grid, Transforms, Animations, Custom Properties, Container Queries, and more. New properties arrive regularly. Some are shorthand composites. Others are longhand constituents. Some accept keywords. Others accept functions. Some inherit by default. Others do not.
The real problem is retrieval friction. When you are deep in a coding session, switching contexts to search documentation breaks flow. A well-organized css properties cheat sheet reduces lookup time to seconds. An interactive cheat sheet goes further — it lets you search by property name, filter by category, and copy code examples instantly. Whether you are building a responsive layout, debugging a flex container, or crafting a keyframe animation, having every CSS property at your fingertips keeps you productive.
Quick Reference Table
Here is a condensed CSS property reference organized by category. Bookmark this page or open the Free CSS Properties Cheat Sheet for a searchable, filterable version with full syntax and examples.
| Category | Key Properties | Common Syntax |
|---|---|---|
| Layout | display, position, width, height, top, right, bottom, left, z-index, overflow | display: flex; |
| Box Model | margin, padding, border, box-sizing, outline | margin: 1rem auto; |
| Typography | font-family, font-size, font-weight, line-height, text-align, color | font: 400 1rem/1.5 sans-serif; |
| Colors & Background | background, background-color, background-image, opacity | background: #fff url(bg.png); |
| Flexbox | flex, justify-content, align-items, flex-direction, gap | justify-content: center; |
| Grid | grid, grid-template-columns, grid-template-rows, gap, grid-area | grid-template-columns: 1fr 1fr; |
| Transforms | transform, transform-origin | transform: rotate(45deg); |
| Animation | animation, transition, @keyframes | transition: all 0.3s ease; |
| UI & Misc | cursor, pointer-events, user-select, resize, appearance | cursor: pointer; |
Layout Properties
Layout properties control how elements are positioned and displayed in the document flow. They are the foundation of every webpage structure.
display
The display property defines how an element generates boxes and interacts with the layout algorithm. It is the most consequential property in CSS.
/* Block-level: takes full width, stacks vertically */
div { display: block; }
/* Inline: flows with text, ignores width/height */
span { display: inline; }
/* Inline-block: inline flow but accepts box model properties */
.button { display: inline-block; }
/* Hidden: removes from layout and accessibility tree */
.hidden { display: none; }
/* Modern layout engines */
.container { display: flex; }
.grid { display: grid; }
Modern CSS adds display: contents (removes the element from layout but keeps children) and two-value syntax like display: block flex (outer and inner display types). The two-value syntax is the future but has limited browser support.
position
The position property defines how an element is positioned in the document.
/* Static: default, follows normal document flow */
.static { position: static; }
/* Relative: offset from normal position */
.relative { position: relative; top: 10px; left: 20px; }
/* Absolute: positioned relative to nearest positioned ancestor */
.absolute { position: absolute; top: 0; right: 0; }
/* Fixed: positioned relative to viewport */
.fixed { position: fixed; bottom: 1rem; right: 1rem; }
/* Sticky: hybrid of relative and fixed */
.sticky { position: sticky; top: 0; }
position: sticky is one of the most useful properties for headers and sidebars. It behaves like relative until the element reaches a scroll threshold, then becomes fixed. Note that sticky positioning requires a defined threshold (like top: 0) and may not work inside elements with overflow: hidden.
z-index
z-index controls the stacking order of positioned elements. Higher values appear in front of lower values.
.modal { z-index: 1000; }
.dropdown { z-index: 100; }
.tooltip { z-index: 200; }
Important: z-index only works on positioned elements (not static) and flex/grid children. It also creates a new stacking context, which can cause unexpected layering behavior. Elements with opacity < 1, transform, or filter also create new stacking contexts.
overflow
overflow controls what happens when content exceeds its container.
.scrollable { overflow: auto; }
.hidden { overflow: hidden; }
.scroll-x { overflow-x: scroll; overflow-y: hidden; }
Box Model Properties
The box model is the core concept of CSS spacing. Every element is a box with content, padding, border, and margin layers.
box-sizing
box-sizing determines how width and height are calculated. The modern default should be border-box.
/* content-box: width/height applies only to content (default, but problematic) */
/* border-box: width/height includes padding and border */
*, *::before, *::after {
box-sizing: border-box;
}
With border-box, setting width: 300px means the total rendered width is 300px including padding and border. Without it, the element expands beyond 300px when padding or border is added. This is the single most important reset in modern CSS.
margin and padding
Both accept one to four values, following the TRBL (Top Right Bottom Left) shorthand:
/* One value: all sides */
.box { margin: 1rem; }
/* Two values: vertical | horizontal */
.box { margin: 1rem 2rem; }
/* Three values: top | horizontal | bottom */
.box { margin: 1rem 2rem 0.5rem; }
/* Four values: top | right | bottom | left */
.box { margin: 1rem 2rem 0.5rem 1.5rem; }
Modern CSS adds logical properties: margin-block-start, margin-inline-end, etc. These adapt to writing direction (LTR vs RTL) automatically.
border
border is a shorthand for border-width, border-style, and border-color:
/* Shorthand */
.card { border: 1px solid #e5e7eb; }
/* Individual sides */
.card { border-top: 2px dashed #3b82f6; }
/* Rounded corners */
.card { border-radius: 0.5rem; }
.circle { border-radius: 50%; }
Typography Properties
Typography properties control text rendering, spacing, and decoration. They are essential for readability and brand expression.
font-family
Defines the typeface. Always provide fallback fonts:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
}
The system font stack above adapts to the user's operating system, providing native-looking text on macOS, Windows, iOS, and Android without loading external fonts.
font-size, font-weight, and line-height
/* Relative units scale with user preferences */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
/* Numeric weights: 100-900 */
.bold { font-weight: 700; }
.light { font-weight: 300; }
/* Line height: unitless values inherit better */
body { line-height: 1.6; }
Use unitless line-height (like 1.6 instead of 1.6rem) so child elements inherit the ratio rather than a fixed value. This prevents unexpected text overlap when nested elements have different font sizes.
text-align and text-decoration
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }
.link { text-decoration: none; }
color
The color property sets text color. CSS supports multiple color formats:
/* Named colors */
.red { color: red; }
/* Hex */
.blue { color: #3b82f6; }
/* RGB/RGBA */
.semi { color: rgba(59, 130, 246, 0.5); }
/* HSL/HSLA (most intuitive for humans) */
.purple { color: hsl(270, 60%, 50%); }
Colors and Background Properties
Background properties control the visual surface behind content. They are essential for creating depth, hierarchy, and visual interest.
background-color and background-image
.solid { background-color: #f3f4f6; }
/* Gradient */
.gradient {
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Multiple backgrounds */
.hero {
background-image: url(overlay.png), url(hero.jpg);
background-position: center, top;
background-size: cover, cover;
}
background-size and background-position
.cover { background-size: cover; }
.contain { background-size: contain; }
/* Position keywords */
.top-right { background-position: top right; }
/* Percentage or length */
.centered { background-position: 50% 50%; }
opacity
opacity sets the transparency of an entire element and its children. For partial transparency of just the background, use background-color: rgba() instead.
/* Fades entire element including text */
.faded { opacity: 0.5; }
/* Fades only background */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
CSS Flexbox Properties
CSS Flexbox is a one-dimensional layout system designed for distributing space and aligning items along a single axis — either a row or a column. It is the standard tool for component-level layout.
display: flex and flex-direction
.container { display: flex; }
/* Row (default): left to right */
.row { flex-direction: row; }
/* Column: top to bottom */
.column { flex-direction: column; }
/* Reversed */
.row-reverse { flex-direction: row-reverse; }
justify-content
justify-content aligns items along the main axis:
.start { justify-content: flex-start; }
.end { justify-content: flex-end; }
.center { justify-content: center; }
.between { justify-content: space-between; }
.around { justify-content: space-around; }
.evenly { justify-content: space-evenly; }
align-items and align-content
align-items aligns items along the cross axis for a single line. align-content aligns multiple lines when wrapping:
/* Single line alignment */
.centered { align-items: center; }
.stretch { align-items: stretch; }
/* Multi-line alignment (requires flex-wrap: wrap) */
.gapped { align-content: space-between; }
flex shorthand
flex is a shorthand for flex-grow, flex-shrink, and flex-basis:
/* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
.equal { flex: 1; }
/* Grow twice as much */
.double { flex: 2; }
/* Don't grow, don't shrink, fixed basis */
.fixed { flex: 0 0 200px; }
Using flex: 1 is the most common pattern for equal-width columns. It makes all flex items grow equally to fill available space.
gap
gap adds spacing between flex items without affecting outer margins:
.grid-flex {
display: flex;
gap: 1rem;
}
gap is one of the best additions to Flexbox. Before it, developers used negative margins on the container and positive margins on children — a hacky workaround. gap works in all modern browsers and is also available in Grid.
CSS Grid Properties
CSS Grid is a two-dimensional layout system that controls both rows and columns simultaneously. It is the standard tool for page-level architecture and complex component layouts.
display: grid and grid-template-columns
.container { display: grid; }
/* Fixed columns */
.fixed { grid-template-columns: 200px 200px 200px; }
/* Fractional units */
.fractional { grid-template-columns: 1fr 2fr 1fr; }
/* Repeat notation */
.repeat { grid-template-columns: repeat(3, 1fr); }
/* Auto-fill responsive */
.responsive {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
The repeat(auto-fill, minmax(250px, 1fr)) pattern creates responsive grids without media queries. Columns are at least 250px wide and fill the available space. When a column drops below 250px, it wraps to the next row.
grid-template-rows and grid-template-areas
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
grid-template-areas is one of the most intuitive ways to define page layouts. The ASCII-art syntax makes the structure visible at a glance. Changing layout for different breakpoints is as simple as redefining the areas.
gap in Grid
Grid gap works identically to Flexbox gap but applies to both rows and columns:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Different row and column gaps */
.uneven {
row-gap: 2rem;
column-gap: 1rem;
}
grid-column and grid-row
Items can span multiple tracks using grid-column and grid-row:
.wide {
grid-column: span 2;
}
.full-width {
grid-column: 1 / -1;
}
.positioned {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
The 1 / -1 pattern spans from the first track to the last, creating full-width elements regardless of how many columns exist.
Transform Properties
CSS Transforms modify the coordinate space of elements, enabling visual effects like rotation, scaling, and translation without affecting document flow.
transform functions
/* Move element */
.move { transform: translate(50px, 100px); }
.move-x { transform: translateX(-100%); }
/* Scale element */
.scale { transform: scale(1.5); }
.scale-x { transform: scaleX(-1); } /* mirror */
/* Rotate element */
.rotate { transform: rotate(45deg); }
/* Skew element */
.skew { transform: skew(10deg, 5deg); }
/* Multiple transforms (applied right to left) */
.combined {
transform: translate(-50%, -50%) scale(0.8) rotate(15deg);
}
transform-origin
Defines the pivot point for transforms:
/* Default: center center */
.default { transform-origin: 50% 50%; }
/* Top-left corner */
.corner { transform-origin: 0 0; }
/* Bottom-right */
.bottom-right { transform-origin: 100% 100%; }
CSS Transition and Animation Properties
CSS transitions and animations bring interfaces to life. Transitions animate between two states. Animations define complex multi-step sequences using keyframes.
transition
transition is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay:
/* Simple transition */
.button {
background: #3b82f6;
transition: background 0.3s ease;
}
.button:hover {
background: #2563eb;
}
/* Multiple properties */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* All properties with delay */
.fade {
transition: all 0.5s ease-in-out 0.2s;
}
Transition performance tip: only animate transform and opacity for smooth 60fps animations. Animating width, height, top, left, or margin triggers layout recalculation and is expensive.
animation and @keyframes
CSS animations use @keyframes to define intermediate states:
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.slide {
animation: slideIn 0.5s ease-out forwards;
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
Animation shorthand syntax: animation: name duration timing-function delay iteration-count direction fill-mode play-state. The most common values are animation: slideIn 0.5s ease-out forwards where forwards keeps the final state after animation completes.
CSS Animation Performance
For smooth animations, follow these rules:
- Animate only
transformandopacityfor 60fps performance - Avoid animating
width,height,top,left,margin, orpadding - Use
will-change: transformsparingly to hint the browser - Prefer CSS animations over JavaScript for simple effects
UI and Miscellaneous Properties
These properties control user interaction, form appearance, and miscellaneous behaviors.
cursor
.clickable { cursor: pointer; }
.text { cursor: text; }
.grab { cursor: grab; }
.not-allowed { cursor: not-allowed; }
pointer-events
Controls whether an element responds to mouse events:
/* Let clicks pass through to elements below */
.overlay { pointer-events: none; }
/* Re-enable for children */
.overlay .interactive { pointer-events: auto; }
user-select
Controls text selection:
.no-select { user-select: none; }
.all { user-select: all; } /* select all on click */
appearance
Removes default browser styling for form controls:
/* Remove default button styling */
button {
appearance: none;
-webkit-appearance: none;
}
CSS Custom Properties (Variables)
CSS Custom Properties, commonly called CSS variables, enable reusable values without a preprocessor:
:root {
--primary: #3b82f6;
--secondary: #64748b;
--radius: 0.5rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
}
.button {
background: var(--primary);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-md);
}
/* Fallback values */
.text {
color: var(--text-color, #1f2937);
}
Custom properties are scoped to the selector where they are defined. :root creates global variables. Local overrides are possible by redefining the variable in a more specific selector. They are especially powerful for theming and responsive design.
Modern CSS Features
Container Queries
Container queries allow styling based on the size of a container rather than the viewport:
/* Define a container */
.card-container {
container-type: inline-size;
}
/* Query the container */
@container (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
}
Container queries are the most significant layout addition since Grid. They enable truly reusable components that adapt to their context, not just the viewport size.
:has() Pseudo-class
:has() selects elements based on their children or siblings:
/* Style cards that contain images */
.card:has(img) {
border: 2px solid #3b82f6;
}
/* Style forms with invalid inputs */
form:has(:invalid) {
border-left: 4px solid #ef4444;
}
Subgrid
Subgrid allows grid children to inherit the parent's grid tracks:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.subgrid {
grid-column: span 3;
display: grid;
grid-template-columns: subgrid;
}
Common Pitfalls and Best Practices
Specificity Wars
Overly specific selectors create maintenance nightmares. Prefer flat class-based selectors. Use :where() for zero-specificity resets. Reserve IDs for JavaScript hooks, not styling.
Shorthand Gotchas
CSS shorthand properties reset unspecified longhands to their initial values:
/* This resets background-image to none! */
.element {
background-image: url(bg.jpg);
background: #fff; /* overwrites image */
}
/* Correct: use longhand or include all values */
.element {
background-color: #fff;
background-image: url(bg.jpg);
}
Unitless Line Height
Always use unitless line-height values so children inherit the ratio rather than a computed pixel value:
/* Good: inherits as multiplier */
body { line-height: 1.6; }
/* Risky: child inherits 25.6px regardless of its font-size */
body { line-height: 1.6rem; }
Viewport Units and Mobile
100vh on mobile includes the browser chrome, causing overflow issues. Use 100dvh (dynamic viewport height) for accurate full-height layouts:
.hero {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}
Try Our Interactive CSS Properties Cheat Sheet
Reading about CSS properties is valuable, but having an interactive reference at your fingertips is transformative. Our free CSS Properties Cheat Sheet puts every property into a searchable, filterable interface with these features:
- Real-time search — find properties by name, description, or example
- Category filtering — narrow to Layout, Typography, Colors, Flexbox, Grid, Animation, or UI properties
- Syntax highlighting — code examples are color-coded for readability
- One-click copy — copy any code example to your clipboard instantly
- 100% client-side — no data leaves your browser
Bookmark it, share it with your team, and never search for CSS property syntax again.
Related Developer Tools
DevToolkit offers a growing collection of free developer utilities. Check out these related tools and articles:
- CSS Selectors Cheat Sheet — Interactive reference for 70+ selectors with specificity scores and browser support.
- CSS Animation Properties Cheat Sheet — Deep-dive reference for @keyframes, transitions, transforms, timing functions, and common patterns.
- CSS Animation Generator — Build keyframe animations with a live preview.
- CSS Flexbox/Grid Layout Generator — Generate Flexbox and Grid layouts visually.
- CSS Box Shadow Generator — Create layered shadows with real-time preview.
Frequently Asked Questions
What are the most important CSS properties every developer should know?
Every developer should master display, position, width, height, top, right, bottom, left, z-index, overflow, margin, padding, border, box-sizing, font-family, font-size, font-weight, line-height, text-align, color, background, flex, grid, gap, and transition. These properties form the foundation of layout, typography, and visual design on the web.
How does CSS Flexbox differ from CSS Grid?
CSS Flexbox is designed for one-dimensional layouts — either a row or a column. It excels at distributing space and aligning items along a single axis. CSS Grid is designed for two-dimensional layouts, controlling both rows and columns simultaneously. Use Flexbox for component-level alignment and Grid for page-level architecture.
What is the difference between CSS transitions and CSS animations?
CSS transitions animate between two states when a property changes, triggered by events like hover or class changes. CSS animations use @keyframes to define multiple intermediate states and can run automatically without a trigger. Transitions are simpler and great for hover effects; animations are more powerful for complex sequences.
How do I center a div horizontally and vertically with CSS?
With Flexbox: set the parent to display: flex; justify-content: center; align-items: center;. With Grid: set the parent to display: grid; place-items: center;. Both methods are modern, reliable, and work in all current browsers.
What is the CSS box model and why does it matter?
The CSS box model defines how every HTML element is rendered as a rectangular box with content, padding, border, and margin layers. Understanding the box model is essential because it determines how width and height are calculated, how spacing works, and why elements sometimes appear larger than expected. Use box-sizing: border-box to make width and height include padding and border.
Is the CSS Properties Cheat Sheet free to use?
Yes. The DevToolkit CSS Properties Cheat Sheet is completely free with no limits, no registration, and no advertisements. It runs entirely in your browser with no data sent to any server.
Conclusion
CSS properties are the vocabulary of web design. With over two hundred properties spanning layout, typography, color, animation, and user interface, the language is rich but can be overwhelming. Our free interactive CSS properties cheat sheet removes the friction from learning and referencing these properties. Whether you are debugging a flex container, crafting a grid layout, or exploring the latest container queries, the cheat sheet puts every property, syntax, and example at your fingertips. Bookmark it, share it with your team, and keep shipping better CSS.