Skip to main content
Toolsbase Logo

CSS Cheat Sheet

Searchable CSS properties and patterns cheat sheet organized by category. Covers selectors, Flexbox, Grid, box model, typography, layout, and visual effects with copy support.

Last updated:

How to Use

Expand how to use
  1. 1

    Search for properties

    Enter a property name in the search field, or filter by category (Flexbox, Grid, etc.) to find what you need.

  2. 2

    Review syntax and values

    Check the property description, syntax, and available values for each CSS property.

  3. 3

    Copy the property

    Click the copy button to copy the property name to your clipboard for immediate use in your stylesheet.

element
Select elements by tag name

Syntax

element { }

Values

  • div { } — select all div elements
  • p { } — select all paragraph elements
  • h1 { } — select all h1 headings
  • a { } — select all anchor elements

.class
Select elements by class name

Syntax

.classname { }

Values

  • .btn { } — select all elements with class 'btn'
  • .btn.primary { } — select elements with both classes
  • div.card { } — select div elements with class 'card'

#id
Select element by unique ID

Syntax

#idname { }

Values

  • #header { } — select element with id 'header'
  • #nav { } — select element with id 'nav'

[attr]
Select elements by attribute

Syntax

[attr], [attr=value], [attr^=value]

Values

  • [href] { } — elements that have href attribute
  • [type="text"] { } — input elements with type text
  • [class^="btn"] { } — class starting with 'btn'
  • [href$=".pdf"] { } — href ending with .pdf

:pseudo-class
Select elements based on state or position

Syntax

selector:pseudo-class { }

Values

  • :hover — mouse over state
  • :focus — focused element
  • :nth-child(n) — nth child element
  • :first-child — first child element
  • :not(selector) — elements not matching selector

::pseudo-element
Style specific parts of an element

Syntax

selector::pseudo-element { }

Values

  • ::before — insert content before element
  • ::after — insert content after element
  • ::first-line — style first line of text
  • ::placeholder — style placeholder text

combinators
Combine selectors to express relationships

Syntax

A B, A > B, A + B, A ~ B

Values

  • A B { } — B that is a descendant of A
  • A > B { } — B that is a direct child of A
  • A + B { } — B immediately following A (sibling)
  • A ~ B { } — all B siblings following A

display: flex
Enable flexbox layout on a container

Syntax

display: flex | inline-flex

Values

  • flex — block-level flex container
  • inline-flex — inline-level flex container

flex-direction
Set the direction of flex items

Syntax

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

Values

  • row — left to right (default)
  • row-reverse — right to left
  • column — top to bottom
  • column-reverse — bottom to top

justify-content
Align flex items along the main axis

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Values

  • flex-start — items at start (default)
  • flex-end — items at end
  • center — items centered
  • space-between — equal space between items
  • space-around — equal space around items
  • space-evenly — equal space between and around items

align-items
Align flex items along the cross axis

Syntax

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

Values

  • stretch — items stretch to fill (default)
  • flex-start — items at cross-axis start
  • flex-end — items at cross-axis end
  • center — items centered on cross axis
  • baseline — items aligned by text baseline

flex-wrap
Control whether flex items wrap to new lines

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

Values

  • nowrap — all items on one line (default)
  • wrap — items wrap to next line
  • wrap-reverse — items wrap in reverse direction

gap
Set spacing between flex or grid items

Syntax

gap: <row-gap> <column-gap>

Values

  • gap: 16px — equal gap in all directions
  • gap: 8px 16px — row-gap 8px, column-gap 16px
  • row-gap: 8px — gap between rows only
  • column-gap: 16px — gap between columns only

flex-grow
Set how much a flex item grows relative to siblings

Syntax

flex-grow: <number>

Values

  • 0 — item does not grow (default)
  • 1 — item grows to fill available space
  • 2 — item grows twice as much as flex-grow: 1

flex-shrink
Set how much a flex item shrinks relative to siblings

Syntax

flex-shrink: <number>

Values

  • 1 — item shrinks if needed (default)
  • 0 — item does not shrink
  • 2 — item shrinks twice as much as flex-shrink: 1

flex-basis
Set the initial main size of a flex item

Syntax

flex-basis: auto | <length> | <percentage>

Values

  • auto — use item's natural size (default)
  • 0 — item starts from zero size
  • 200px — item starts at 200px
  • 50% — item starts at 50% of container

display: grid
Enable CSS Grid layout on a container

Syntax

display: grid | inline-grid

Values

  • grid — block-level grid container
  • inline-grid — inline-level grid container

grid-template-columns
Define the columns of a grid

Syntax

grid-template-columns: <track-list>

Values

  • repeat(3, 1fr) — 3 equal columns
  • 200px 1fr 200px — fixed, flexible, fixed
  • repeat(auto-fill, minmax(200px, 1fr)) — responsive columns
  • repeat(auto-fit, minmax(150px, 1fr)) — auto-fit columns

grid-template-rows
Define the rows of a grid

Syntax

grid-template-rows: <track-list>

Values

  • 100px 1fr — header then flexible main
  • repeat(3, 100px) — 3 rows of 100px
  • auto — row sized by content
  • minmax(100px, auto) — min 100px, max content

gap (grid)
Set spacing between grid tracks

Syntax

gap: <row-gap> <column-gap>

Values

  • gap: 16px — equal gap
  • gap: 8px 16px — row gap, column gap
  • row-gap: 8px — only between rows
  • column-gap: 16px — only between columns

grid-column
Set a grid item's column span

Syntax

grid-column: <start> / <end>

Values

  • grid-column: 1 / 3 — span from column 1 to 3
  • grid-column: 1 / span 2 — start at 1, span 2 columns
  • grid-column: 1 / -1 — span all columns

grid-row
Set a grid item's row span

Syntax

grid-row: <start> / <end>

Values

  • grid-row: 1 / 3 — span from row 1 to 3
  • grid-row: 1 / span 2 — start at 1, span 2 rows
  • grid-row: 2 / -1 — from row 2 to last

place-items
Shorthand for align-items and justify-items in grid

Syntax

place-items: <align-items> <justify-items>

Values

  • place-items: center — center on both axes
  • place-items: start end — align start, justify end
  • place-items: stretch — stretch on both axes (default)

margin
Set space outside an element

Syntax

margin: <top> <right> <bottom> <left>

Values

  • margin: 16px — all sides 16px
  • margin: 8px 16px — top/bottom 8px, left/right 16px
  • margin: 0 auto — center horizontally
  • margin-top: 8px — only top margin

padding
Set space inside an element

Syntax

padding: <top> <right> <bottom> <left>

Values

  • padding: 16px — all sides 16px
  • padding: 8px 16px — top/bottom 8px, left/right 16px
  • padding: 4px 8px 12px 16px — individual sides
  • padding-inline: 16px — left and right (logical)

border
Set border around an element

Syntax

border: <width> <style> <color>

Values

  • border: 1px solid #ccc — solid gray border
  • border: 2px dashed red — dashed red border
  • border-top: 1px solid — top border only
  • border: none — remove border

box-sizing
Control how width and height are calculated

Syntax

box-sizing: content-box | border-box

Values

  • content-box — width excludes padding and border (default)
  • border-box — width includes padding and border

width / height
Set the dimensions of an element

Syntax

width: <value>; height: <value>

Values

  • width: 100% — full width of parent
  • width: 200px — fixed width
  • max-width: 1200px — maximum width
  • min-height: 100vh — minimum viewport height
  • height: auto — height determined by content

overflow
Control content that overflows element bounds

Syntax

overflow: visible | hidden | scroll | auto

Values

  • visible — content visible outside (default)
  • hidden — overflow clipped
  • scroll — always show scrollbar
  • auto — show scrollbar when needed
  • overflow-x: hidden — clip only horizontal overflow

font-size
Set the size of the font

Syntax

font-size: <length> | <percentage> | keyword

Values

  • font-size: 16px — fixed size in pixels
  • font-size: 1rem — relative to root font size
  • font-size: 1.2em — relative to parent font size
  • font-size: clamp(14px, 2vw, 18px) — responsive size

font-weight
Set the weight (boldness) of the font

Syntax

font-weight: normal | bold | <number>

Values

  • 400 — normal weight
  • 700 — bold weight
  • 100–900 — numeric weights (100 lightest, 900 heaviest)
  • normal — same as 400
  • bold — same as 700

line-height
Set the height of a line of text

Syntax

line-height: normal | <number> | <length>

Values

  • 1.5 — 1.5× font-size (recommended for body text)
  • 1 — same as font-size
  • 24px — fixed line height
  • normal — browser default (~1.2)

text-align
Align inline content horizontally

Syntax

text-align: left | right | center | justify

Values

  • left — align to left (default in LTR)
  • right — align to right
  • center — center alignment
  • justify — justify text to both edges

text-decoration
Set decorative lines on text

Syntax

text-decoration: none | underline | line-through | overline

Values

  • none — remove decoration
  • underline — underline text
  • line-through — strikethrough text
  • underline dotted — dotted underline

word-break
Control how words break at end of line

Syntax

word-break: normal | break-all | keep-all | break-word

Values

  • normal — default word break rules
  • break-all — break between any characters
  • keep-all — don't break between CJK characters
  • overflow-wrap: break-word — break only when necessary

position
Set how an element is positioned in the document

Syntax

position: static | relative | absolute | fixed | sticky

Values

  • static — default flow (default)
  • relative — offset from normal position
  • absolute — positioned relative to nearest positioned ancestor
  • fixed — positioned relative to viewport
  • sticky — switches between relative and fixed on scroll

display
Set the display behavior of an element

Syntax

display: block | inline | inline-block | none | ...

Values

  • block — full width, starts on new line
  • inline — flows with text, no width/height
  • inline-block — inline but accepts dimensions
  • none — hide element (removes from layout)
  • flex — flexbox container
  • grid — grid container

z-index
Set the stack order of a positioned element

Syntax

z-index: auto | <integer>

Values

  • auto — same as parent (default)
  • 0 — base stacking level
  • 1 — above default stack
  • -1 — below default stack
  • 9999 — very high stack (use sparingly)

float
Float an element to the left or right

Syntax

float: none | left | right | inline-start | inline-end

Values

  • none — not floated (default)
  • left — float to the left
  • right — float to the right

clear
Control behavior next to floated elements

Syntax

clear: none | left | right | both

Values

  • none — element can be next to floats (default)
  • left — move below left floats
  • right — move below right floats
  • both — move below all floats

background
Set background color, image, or gradient

Syntax

background: <color> | url() | linear-gradient()

Values

  • background: #f0f0f0 — solid color
  • background: url('img.png') center/cover — image
  • background: linear-gradient(to right, #f00, #00f) — gradient
  • background-color: transparent — transparent background

color
Set the color of text and foreground elements

Syntax

color: <color>

Values

  • color: #333 — dark gray hex
  • color: rgb(51, 51, 51) — RGB value
  • color: hsl(0, 0%, 20%) — HSL value
  • color: oklch(0.3 0 0) — OKLCH value
  • color: currentColor — inherit current color

opacity
Set the transparency of an element

Syntax

opacity: <number between 0 and 1>

Values

  • 0 — fully transparent
  • 0.5 — 50% transparent
  • 1 — fully opaque (default)

box-shadow
Add shadow effect to an element

Syntax

box-shadow: <offset-x> <offset-y> <blur> <spread> <color>

Values

  • box-shadow: 0 2px 4px rgba(0,0,0,0.1) — subtle shadow
  • box-shadow: 0 4px 16px rgba(0,0,0,0.2) — elevated shadow
  • box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) — inner shadow
  • box-shadow: none — remove shadow

border-radius
Round the corners of an element

Syntax

border-radius: <length> | <percentage>

Values

  • border-radius: 4px — slightly rounded
  • border-radius: 50% — circular (for square elements)
  • border-radius: 8px 0 — top-left and bottom-right 8px
  • border-top-left-radius: 8px — single corner

transform
Apply 2D/3D transformations to an element

Syntax

transform: <function>

Values

  • transform: translate(10px, 20px) — move element
  • transform: rotate(45deg) — rotate by 45 degrees
  • transform: scale(1.5) — scale to 1.5×
  • transform: skew(10deg) — skew by 10 degrees
  • transform: translateX(-50%) translateY(-50%) — center trick

transition
Animate property changes smoothly

Syntax

transition: <property> <duration> <timing> <delay>

Values

  • transition: all 0.3s ease — animate all properties
  • transition: color 0.2s ease-in-out — animate color only
  • transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) — custom easing
  • transition: none — disable transitions

animation
Apply keyframe animations to an element

Syntax

animation: <name> <duration> <timing> <delay> <iteration> <direction>

Values

  • animation: spin 1s linear infinite — infinite rotation
  • animation: fade-in 0.5s ease forwards — fade in once
  • animation-play-state: paused — pause animation
  • @keyframes spin { to { transform: rotate(360deg); } } — define keyframe

About CSS Cheat Sheet

CSS Cheat Sheet is a reference collection of frequently used CSS properties and patterns. It covers everything from fundamental selectors and box model to modern layout techniques like Flexbox and Grid, typography, and visual effects. Each entry includes a description, syntax, and practical values to help you write CSS faster.

Key Features

  • 48 essential CSS properties and patterns
  • Syntax and value examples for each property
  • Category filtering (Flexbox, Grid, Selectors, etc.)
  • Real-time search functionality
  • One-click copy of property names

Use Cases

  • Quickly checking Flexbox or CSS Grid syntax while building a responsive layout
  • Looking up available values for properties like display, position, or overflow
  • Learning CSS fundamentals as a developer new to front-end development
  • Referencing box model, spacing, and sizing properties during component styling
  • Using as a quick reference in VS Code or alongside a React or Vue project
  • Checking animation and transition syntax when adding motion to a UI

FAQ

What is the difference between Flexbox and Grid?

Flexbox is a one-dimensional layout method designed for laying out items in a single row or column. CSS Grid is a two-dimensional layout system that can handle both rows and columns simultaneously. Use Flexbox for component-level layout and Grid for page-level or complex two-dimensional layouts.

What is the difference between margin and padding?

Padding is the space inside an element, between the content and the border. Margin is the space outside an element, between the border and surrounding elements. Background color applies to padding but not to margin.

What is box-sizing: border-box?

By default (content-box), width and height only apply to the content area. With border-box, width and height include padding and border, making it easier to predict element sizes. Most modern CSS resets apply border-box to all elements.

When should I use position: absolute vs fixed?

absolute positioning places an element relative to its nearest positioned ancestor (an ancestor with position other than static). fixed positioning places an element relative to the viewport, so it stays in place when scrolling. Use fixed for sticky headers, modals, or floating buttons.

What is the difference between transition and animation?

transition animates a property change from one state to another, typically triggered by user interaction (like :hover). animation uses @keyframes to define multi-step animations that can run automatically, loop, or play in reverse. Use transition for simple state changes and animation for complex, autonomous motion.

Related Tools

Markdown Cheat SheetRegex Cheat SheetHTTP Headers ReferenceCode Review Terms