Text Tools || CSS Cheat Sheet

CSS Cheat Sheet

Complete CSS reference guide with all properties, selectors, flexbox, grid, animations, and more. Interactive tool for developers and designers. Fast, secure, and free to use.

🎯 CSS Selectors

* { }

element { }

.class { }

#id { }

element.class { }

element, element { }

element element { }

element > element { }

element + element { }

📐 Layout Properties

width: auto | 100px | 50% | 100vw

height: auto | 100px | 50% | 100vh

max-width: none | 500px | 80%

min-height: 0 | 200px | 100vh

box-sizing: content-box | border-box

overflow: visible | hidden | scroll | auto

🔄 Flexbox

display: flex

flex-direction: row | column | row-reverse | column-reverse

align-items: stretch | flex-start | center | flex-end | baseline

flex-wrap: nowrap | wrap | wrap-reverse

flex-grow: 0 | 1 | 2

flex-shrink: 1 | 0

flex-basis: auto | 200px | 50%

🔤 Typography

font-family: Arial, sans-serif | "Times New Roman", serif

font-size: 16px | 1.2em | 1.5rem

font-weight: normal | bold | 400 | 700

font-style: normal | italic | oblique

line-height: normal | 1.5 | 24px

text-align: left | center | right | justify

text-decoration: none | underline | line-through

text-transform: none | uppercase | lowercase | capitalize

letter-spacing: normal | 2px | 0.1em

🎨 Colors & Backgrounds

color: red | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%)

background-color: blue | #0066cc

background-image: url('image.jpg') | linear-gradient(45deg, red, blue)

background-size: auto | cover | contain | 100px 200px

background-position: center | top left | 50% 50%

background-repeat: repeat | no-repeat | repeat-x | repeat-y

opacity: 1 | 0.5 | 0

How to Use This CSS Cheat Sheet?

This interactive CSS cheat sheet is designed for quick reference and learning. Just follow these steps:

Search Properties

Use the search box to find specific CSS properties, values, or examples. Results update instantly as you type.

Filter by Category

Click category buttons (Layout, Typography, Flexbox, etc.) to filter sections. 'All' shows everything.

Toggle Sections

Click the toggle button on each section header to expand or collapse content for better navigation.

Copy Code Snippets

Click on any CSS property or the 'Copy' button in the section header to copy to clipboard for quick use.

Drag to Reorder

Drag sections by their headers to reorder for personalized reference. Save your favorite order!

Keyboard Shortcuts

Use Ctrl+F (Cmd+F on Mac) to focus search, Escape to clear, and click properties to copy.

Secure & Easy

This tool runs entirely in your browser—no files uploaded, no data stored. Fast, secure, and completely free.

With this tool, you can save time, learn CSS faster, and reference properties effortlessly.

Master CSS Without Hassle.