CSS Cheat Sheet

This CSS cheat sheet gives you a quick reference for the most useful CSS selectors, properties, units, layout patterns, typography rules, Flexbox, Grid, responsive design, animations, forms, tables, and modern CSS features. Use it as a beginner-friendly reference while building real websites and applications.

Quick Reference List

Use this list to jump directly to the section you need. It is designed for fast lookup during development, interviews, revision, and day-to-day frontend work.

CSS Syntax Cheat Sheet
CSS Selectors Cheat Sheet
CSS Colors Cheat Sheet
CSS Units Cheat Sheet
CSS Typography Cheat Sheet
CSS Box Model Cheat Sheet
CSS Background and Border Cheat Sheet
CSS Layout Cheat Sheet
CSS Flexbox Cheat Sheet
CSS Grid Cheat Sheet
Responsive Design Cheat Sheet
Effects, Transitions, and Animations Cheat Sheet
Forms and Tables Cheat Sheet
Modern CSS Cheat Sheet
Useful CSS Cheat Sheet Examples
CSS Cheat Sheet Best Practices
Common CSS Mistakes to Avoid
CSS Cheat Sheet and SEO

What Is a CSS Cheat Sheet?

A CSS cheat sheet is a quick reference guide that lists commonly used CSS syntax, selectors, properties, values, and examples in one place. It helps beginners remember important CSS rules and helps experienced developers work faster.

A good cheat sheet should be structured by category, include real syntax examples, and highlight modern CSS techniques like Grid, container queries, logical properties, accessibility states, and performance-friendly animation patterns.

selector {
  property: value;
}

.card {
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
}

CSS Syntax Cheat Sheet

Concept	Syntax	Purpose
CSS Rule	`selector { property: value; }`	Basic CSS rule structure.
Declaration	`color: blue;`	One CSS property and value pair.
Comment	`/* comment */`	Adds notes inside CSS.
Class Rule	`.button { ... }`	Styles reusable class-based elements.
Media Query	`@media (min-width: 768px) { ... }`	Applies responsive CSS.

CSS Selectors Cheat Sheet

Selector Type	Example	Meaning
Universal	`*`	Selects all elements.
Element	`p`	Selects all paragraph elements.
Class	`.card`	Selects elements with class `card`.
ID	`#header`	Selects element with ID `header`.
Group	`h1, h2, h3`	Applies styles to multiple selectors.
Descendant	`.article p`	Selects paragraphs inside `.article`.
Child	`.nav > li`	Selects direct child list items.
Adjacent Sibling	`h2 + p`	Selects the next paragraph after an h2.
Attribute	`[type="email"]`	Selects elements by attribute value.
Pseudo-class	`a:hover`	Styles an element state.
Pseudo-element	`p::first-line`	Styles part of an element.

CSS Colors Cheat Sheet

Color Type	Example	Usage
Named Color	`color: red;`	Simple predefined color names.
Hex Color	`color: #0d6efd;`	Common web color format.
RGB	`color: rgb(13, 110, 253);`	Red, green, blue color values.
RGBA	`background: rgba(0, 0, 0, 0.5);`	RGB color with opacity.
HSL	`color: hsl(216, 98%, 52%);`	Hue, saturation, lightness.
Current Color	`border-color: currentColor;`	Uses the current text color.
Transparent	`background: transparent;`	Creates transparent background.

CSS Units Cheat Sheet

Unit	Example	Best Use
`px`	`border: 1px solid;`	Precise small sizes and borders.
`%`	`width: 100%;`	Flexible parent-based sizing.
`em`	`padding: 1em;`	Spacing relative to current font size.
`rem`	`font-size: 1rem;`	Root-based typography and spacing.
`vw`	`width: 100vw;`	Viewport width sizing.
`vh`	`min-height: 100vh;`	Viewport height sizing.
`dvh`	`min-height: 100dvh;`	Dynamic mobile viewport height.
`ch`	`max-width: 65ch;`	Readable text width.
`fr`	`grid-template-columns: 1fr 2fr;`	CSS Grid fractional sizing.
`deg`	`rotate: 45deg;`	Rotation angles.
`ms`	`transition-duration: 200ms;`	Short animation timing.
`s`	`animation-duration: 1s;`	Animation timing in seconds.

CSS Typography Cheat Sheet

Property	Example	Purpose
`font-family`	`font-family: system-ui, sans-serif;`	Sets font family.
`font-size`	`font-size: 1rem;`	Sets text size.
`font-weight`	`font-weight: 700;`	Sets text thickness.
`font-style`	`font-style: italic;`	Sets italic or normal style.
`line-height`	`line-height: 1.6;`	Sets line spacing.
`letter-spacing`	`letter-spacing: 0.05em;`	Controls letter spacing.
`text-align`	`text-align: center;`	Aligns text.
`text-decoration`	`text-decoration: underline;`	Adds underline or line-through.
`text-transform`	`text-transform: uppercase;`	Changes capitalization.
`white-space`	`white-space: nowrap;`	Controls wrapping behavior.

CSS Box Model Cheat Sheet

Property	Example	Purpose
`width`	`width: 100%;`	Sets element width.
`height`	`height: 300px;`	Sets element height.
`max-width`	`max-width: 1200px;`	Limits maximum width.
`min-height`	`min-height: 100vh;`	Sets minimum height.
`margin`	`margin: 1rem;`	Outside spacing.
`padding`	`padding: 1rem;`	Inside spacing.
`border`	`border: 1px solid #dee2e6;`	Element border.
`border-radius`	`border-radius: 0.75rem;`	Rounds corners.
`box-sizing`	`box-sizing: border-box;`	Controls sizing calculation.
`overflow`	`overflow: hidden;`	Controls overflowing content.

CSS Background and Border Cheat Sheet

Property	Example	Purpose
`background`	`background: #ffffff;`	Background shorthand.
`background-color`	`background-color: #f8f9fa;`	Sets background color.
`background-image`	`background-image: url("/hero.jpg");`	Sets background image.
`background-size`	`background-size: cover;`	Controls image size.
`background-position`	`background-position: center;`	Controls image position.
`border-width`	`border-width: 1px;`	Sets border thickness.
`border-style`	`border-style: solid;`	Sets border style.
`border-color`	`border-color: #dee2e6;`	Sets border color.
`outline`	`outline: 3px solid #0d6efd;`	Creates focus outline.
`outline-offset`	`outline-offset: 3px;`	Adds space around outline.

CSS Layout Cheat Sheet

Property	Example	Purpose
`display`	`display: block;`	Controls element display type.
`position`	`position: relative;`	Controls positioning method.
`top/right/bottom/left`	`top: 0;`	Offsets positioned elements.
`inset`	`inset: 0;`	Shorthand for all offsets.
`z-index`	`z-index: 10;`	Controls stacking order.
`float`	`float: left;`	Floats an element.
`clear`	`clear: both;`	Prevents float overlap.
`visibility`	`visibility: hidden;`	Hides while keeping space.
`opacity`	`opacity: 0.8;`	Controls transparency.

CSS Flexbox Cheat Sheet

Property	Example	Purpose
`display`	`display: flex;`	Creates flex container.
`flex-direction`	`flex-direction: row;`	Sets main axis direction.
`flex-wrap`	`flex-wrap: wrap;`	Allows items to wrap.
`justify-content`	`justify-content: center;`	Aligns items on main axis.
`align-items`	`align-items: center;`	Aligns items on cross axis.
`align-content`	`align-content: space-between;`	Aligns wrapped lines.
`gap`	`gap: 1rem;`	Adds spacing between items.
`flex`	`flex: 1 1 250px;`	Flex item shorthand.
`align-self`	`align-self: flex-start;`	Aligns one item.
`order`	`order: 2;`	Changes visual order.

CSS Grid Cheat Sheet

Property / Function	Example	Purpose
`display`	`display: grid;`	Creates grid container.
`grid-template-columns`	`repeat(3, 1fr)`	Defines columns.
`grid-template-rows`	`auto 1fr auto`	Defines rows.
`grid-template-areas`	`"header header" "sidebar main"`	Defines named areas.
`grid-column`	`grid-column: span 2;`	Controls column placement.
`grid-row`	`grid-row: span 2;`	Controls row placement.
`grid-area`	`grid-area: main;`	Places item in named area.
`gap`	`gap: 1rem;`	Adds grid spacing.
`repeat()`	`repeat(3, 1fr)`	Repeats track sizes.
`minmax()`	`minmax(250px, 1fr)`	Sets minimum and maximum track size.
`auto-fit`	`repeat(auto-fit, minmax(250px, 1fr))`	Creates responsive grids.
`place-items`	`place-items: center;`	Aligns grid items.

Responsive Design Cheat Sheet

Technique	Example	Purpose
Viewport Meta	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`	Enables mobile scaling.
Mobile First	`@media (min-width: 768px)`	Enhances layouts for larger screens.
Responsive Image	`max-width: 100%; height: auto;`	Prevents image overflow.
Responsive Container	`width: min(100% - 2rem, 1200px);`	Creates flexible page width.
Fluid Type	`font-size: clamp(2rem, 6vw, 4rem);`	Scales text smoothly.
Responsive Grid	`repeat(auto-fit, minmax(250px, 1fr))`	Creates adaptive card layouts.
Dynamic Viewport	`min-height: 100dvh;`	Handles mobile browser UI changes.

CSS Effects, Transitions, and Animations Cheat Sheet

Feature	Example	Purpose
Box Shadow	`box-shadow: 0 1rem 2rem rgba(0,0,0,.12);`	Adds depth.
Text Shadow	`text-shadow: 1px 1px 2px rgba(0,0,0,.3);`	Adds text depth.
Transform	`transform: translateY(-4px);`	Moves, scales, rotates, or skews.
Transition	`transition: transform 0.2s ease;`	Smoothly changes property values.
Keyframes	`@keyframes fadeIn { ... }`	Defines animation steps.
Animation	`animation: fadeIn 0.4s ease;`	Runs keyframe animation.
Filter	`filter: blur(4px);`	Applies visual effects.
Reduced Motion	`@media (prefers-reduced-motion: reduce)`	Supports motion-sensitive users.

CSS Forms and Tables Cheat Sheet

Feature	Example	Purpose
Form Control	`input, select, textarea { font: inherit; }`	Makes controls match typography.
Focus State	`:focus-visible { outline: 3px solid; }`	Improves keyboard accessibility.
Placeholder	`input::placeholder`	Styles placeholder text.
Accent Color	`accent-color: #0d6efd;`	Styles native checkbox/radio accents.
Validation	`input:invalid`	Styles invalid inputs.
Table Layout	`border-collapse: collapse;`	Creates clean table borders.
Striped Rows	`tr:nth-child(even)`	Improves table scanability.
Responsive Table	`overflow-x: auto;`	Allows wide tables to scroll.
Sticky Header	`thead th { position: sticky; top: 0; }`	Keeps table headers visible.

Modern CSS Cheat Sheet

Feature	Example	Best Use
CSS Variables	`var(--color-primary)`	Design tokens and themes.
Container Queries	`@container (min-width: 400px)`	Component responsiveness.
Cascade Layers	`@layer base, components, utilities;`	CSS priority organization.
Nesting	`.card { &:hover { ... } }`	Component selector organization.
`:has()`	`.card:has(img)`	Parent or condition-based styling.
Logical Properties	`margin-inline: auto;`	International-friendly layouts.
Aspect Ratio	`aspect-ratio: 16 / 9;`	Stable media boxes.
Scroll Snap	`scroll-snap-type: x mandatory;`	Carousel and section scrolling.
Color Scheme	`color-scheme: light dark;`	Supports browser theme behavior.

Useful CSS Cheat Sheet Examples

/* Responsive container */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

/* Responsive card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Accessible focus state */
:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

/* Fluid heading */
.hero-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

CSS Cheat Sheet Best Practices

Use semantic HTML before adding CSS styling.
Prefer class selectors for reusable components.
Use rem, %, fr, and clamp() for responsive layouts.
Use Flexbox for one-dimensional layouts.
Use Grid for two-dimensional layouts.
Use visible focus states for keyboard users.
Use design tokens or CSS variables for colors, spacing, radius, shadows, and typography.
Keep selectors simple and avoid unnecessary specificity.
Test CSS on mobile, desktop, keyboard, zoom, and reduced motion settings.

Common CSS Mistakes to Avoid

Using fixed-width layouts that break on mobile.
Removing focus outlines without replacement styles.
Using !important instead of solving specificity problems.
Overusing deeply nested selectors.
Animating layout-heavy properties like width, height, top, and left.
Using low-contrast text and background colors.
Forgetting responsive images and table wrappers.
Relying only on hover for important interactions.

CSS Cheat Sheet and SEO

CSS does not directly create rankings, but good CSS improves readability, accessibility, mobile usability, layout stability, performance, and page experience.

Responsive CSS improves mobile-friendly design.
Readable typography improves content consumption.
Accessible focus and color styles support more users.
Performance-friendly transitions and animations improve user experience.
Clean CSS helps maintain long-term page quality.

Key Takeaways

A CSS cheat sheet gives quick access to common syntax, selectors, properties, units, and examples.
Most CSS work depends on selectors, typography, colors, spacing, box model, layout, Flexbox, and Grid.
Responsive CSS uses media queries, flexible units, fluid containers, responsive images, and modern viewport units.
Modern CSS features like variables, container queries, cascade layers, :has(), and clamp() improve development speed.
Accessible CSS includes visible focus states, readable contrast, responsive layouts, and reduced motion support.

Pro Tip

Bookmark this CSS cheat sheet and learn it by category: selectors, colors, units, typography, box model, Flexbox, Grid, responsive design, animations, forms, tables, and modern CSS.