CSS Cheatsheet

p { color: blue; }

Targets all <p> elements

Example: Select all paragraphs

.btn { padding: 10px; }

Reusable styles for multiple elements

Example: Can be applied to any element

#header { height: 80px; }

Unique identifier, highest specificity

Example: Should be used once per page

* { margin: 0; box-sizing: border-box; }

Selects every element on the page

Example: Great for CSS resets

input[type='email'] { border: 2px solid blue; }

Target elements by attribute

Example: Style specific input types

a[href^='https'] { color: green; }

Matches attribute starting value

Example: Style external links

img[src$='.png'] { border: 1px solid gray; }

Matches attribute ending value

Example: Target specific file types

div[class*='card'] { border-radius: 8px; }

Matches if attribute contains value

Example: Match partial class names

div > p { margin: 0; }

Only direct children

Example: More specific than descendant

div p { color: #333; }

All nested elements

Example: Applies to any depth

h1 + p { font-size: 18px; }

Immediately following sibling

Example: Style first paragraph after heading

h1 ~ p { margin-top: 10px; }

All following siblings

Example: Style all paragraphs after h1

width: 300px;
height: 200px;
max-width: 100%;

Control element dimensions

Example: Use max-width for responsiveness

padding: 20px;
padding: 10px 20px;
padding: 10px 20px 15px 5px;

Inner spacing (top right bottom left)

Example: Creates space inside element

border: 2px solid #333;
border-left: 4px solid blue;
border-radius: 12px;

Element boundary

Example: Can be styled per side

margin: 20px auto;
margin-top: 30px;
margin: 0 auto;

Outer spacing, auto centers block elements

Example: Margins collapse vertically

box-sizing: border-box;

Include padding & border in width

Example: Makes sizing predictable

min-width: 300px;
max-width: 1200px;
min-height: 100vh;

Set size constraints

Example: Flexible but controlled sizing

display: block;
width: 100%;

Takes full width, starts on new line

Example: Default for div, p, h1-h6

display: inline;
padding: 5px 10px;

Flows with text, no width/height

Example: Default for span, a, strong

display: inline-block;
width: 200px;

Inline flow with block properties

Example: Best of both worlds

display: none;

Removes from document flow

Example: Use visibility:hidden to keep space

position: static;

Default positioning, follows normal flow

Example: Top/left/right/bottom ignored

position: relative;
top: 10px;
left: 20px;

Positioned relative to normal position

Example: Creates positioning context

position: absolute;
top: 0;
right: 0;

Positioned relative to nearest positioned ancestor

Example: Removed from normal flow

position: fixed;
bottom: 20px;
right: 20px;

Fixed relative to viewport

Example: Stays in place when scrolling

position: sticky;
top: 0;
z-index: 100;

Toggles between relative and fixed

Example: Perfect for sticky headers

z-index: 1000;

Controls stacking order (requires positioning)

Example: Higher values appear on top

overflow: auto;
overflow-x: hidden;
overflow-y: scroll;

Handle content overflow

Example: Hidden clips content

display: flex;
flex-direction: row;
flex-wrap: wrap;

Enable flexbox layout

Example: All direct children become flex items

justify-content: space-between;
/* flex-start, flex-end, center,
   space-around, space-evenly */

Align items on main axis

Example: Controls horizontal alignment (in row)

align-items: center;
/* flex-start, flex-end,
   stretch, baseline */

Align items on cross axis

Example: Controls vertical alignment (in row)

align-content: space-between;

Align multiple rows/columns

Example: Only works with flex-wrap

gap: 20px;
row-gap: 15px;
column-gap: 30px;

Spacing between flex items

Example: Cleaner than margins

flex: 1;
/* flex-grow flex-shrink flex-basis */
flex: 1 0 200px;

Control item flexibility

Example: flex: 1 means equal distribution

flex-grow: 2;

How much item grows relative to others

Example: Default is 0 (won't grow)

flex-shrink: 0;

How much item shrinks when needed

Example: Default is 1 (will shrink)

order: -1;

Change visual order without HTML

Example: Lower numbers appear first

align-self: flex-end;

Override align-items for single item

Example: Individual item alignment

display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-template-rows: auto 1fr auto;

Define grid structure

Example: fr = flexible fraction unit

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);

Use repeat for patterns

Example: Cleaner syntax for repeated values

gap: 20px;
row-gap: 30px;
column-gap: 15px;

Spacing between grid cells

Example: Replaces margin-based spacing

grid-auto-rows: 150px;
grid-auto-flow: dense;

Handle implicit grid items

Example: Dense packs items tightly

grid-column: 1 / 3;
grid-row: 2 / 4;

Position items across cells

Example: Start / end line numbers

grid-area: 1 / 1 / 3 / 4;
/* row-start / col-start /
   row-end / col-end */

Shorthand for position

Example: All four values in one

grid-column: span 2;
grid-row: span 3;

Span multiple columns/rows

Example: Relative to current position

grid-template-areas:
  'header header header'
  'sidebar main main'
  'footer footer footer';

Create named grid regions

Example: Then use grid-area: header

justify-items: center;
align-items: start;
justify-content: space-between;

Control alignment

Example: Items vs content alignment

grid-template-columns:
  repeat(auto-fit, minmax(250px, 1fr));

Responsive without media queries

Example: auto-fit creates responsive grid

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Font stack with fallbacks

Example: System fonts as backup

font-size: 16px;
font-size: 1.5rem;
font-size: clamp(14px, 2vw, 20px);

Text size (rem = root em)

Example: Clamp for responsive sizing

font-weight: 400;
/* 100-900, normal(400), bold(700) */

Text thickness

Example: Variable fonts support any value

font-style: italic;
font-style: oblique 20deg;

Italic or oblique text

Example: Oblique can take angle

line-height: 1.6;
line-height: 1.5em;

Vertical spacing between lines

Example: Unitless values scale with font-size

text-align: center;
/* left, right, justify, start, end */

Horizontal text alignment

Example: Start/end respect text direction

text-decoration: underline wavy red;
text-decoration-thickness: 2px;

Underline, overline, line-through

Example: Can style color and thickness

text-transform: uppercase;
/* lowercase, capitalize */

Change text casing

Example: Capitalize = first letter of each word

letter-spacing: 0.05em;
letter-spacing: 2px;

Space between characters (tracking)

Example: Positive = wider, negative = tighter

word-spacing: 5px;

Space between words

Example: Less common than letter-spacing

text-indent: 2em;

Indent first line of text

Example: Useful for paragraphs

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Handle overflowing text with ...

Example: Requires nowrap and overflow

word-break: break-all;
overflow-wrap: break-word;

Control word breaking

Example: Prevent long words from overflowing

color: #3498db;
color: #fff;
color: #rgba; /* 4-digit with alpha */

Hexadecimal color notation

Example: 3-digit is shorthand for 6-digit

color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.8);

Red, Green, Blue (0-255)

Example: Alpha = transparency (0-1)

color: hsl(204, 70%, 53%);
color: hsla(204, 70%, 53%, 0.8);

Hue (0-360), Saturation, Lightness

Example: More intuitive for color adjustment

background-color: #f0f0f0;
background: linear-gradient(45deg, #667eea, #764ba2);

Solid or gradient backgrounds

Example: Background shorthand includes color

background-image: url('image.jpg');
background-size: cover;
background-position: center;

Image backgrounds

Example: Cover scales to fill container

background:
  url('overlay.png') center / cover,
  linear-gradient(45deg, #667eea, #764ba2);

Layer multiple backgrounds

Example: First listed appears on top

background: linear-gradient(
  135deg,
  #667eea 0%,
  #764ba2 100%
);

Smooth color transitions

Example: Angle or direction (to right, to bottom)

background: radial-gradient(
  circle at center,
  #667eea,
  #764ba2
);

Circular gradients from center

Example: Can use ellipse shape

background: conic-gradient(
  from 0deg,
  red, yellow, green, blue, red
);

Rotational gradients

Example: Great for pie charts

background-repeat: no-repeat;
/* repeat, repeat-x, repeat-y, space, round */

Control image tiling

Example: Space distributes evenly

background-attachment: fixed;

Fixed creates parallax effect

Example: Scroll = moves with element

opacity: 0.8;

Element transparency (0-1)

Example: Affects entire element including children

border: 2px solid #333;
border-width: 1px 2px 3px 4px;
border-style: dashed;

Border on all sides

Example: Can set each side individually

border-top: 3px solid blue;
border-bottom: 1px dashed red;
border-left: none;

Individual side borders

Example: Mix different styles

border-radius: 8px;
border-radius: 50%;
border-radius: 20px 20px 0 0;

Rounded corners

Example: 50% creates perfect circle

border: 10px solid;
border-image: url('border.png') 30 round;

Use image as border

Example: Great for decorative borders

outline: 2px solid blue;
outline-offset: 4px;

Drawn outside border

Example: Doesn't affect layout

button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

Keyboard navigation indicator

Example: Don&apos;t remove without alternative

box-decoration-break: clone;

How decorations split across lines

Example: Clone applies to each fragment

box-shadow: 0 4px 6px rgba(0,0,0,0.1);
/* x y blur spread color */

Drop shadow on element

Example: Positive Y = shadow below

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 8px 16px rgba(0,0,0,0.08);

Layer shadows for depth

Example: Comma-separated list

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Inner shadow effect

Example: Creates pressed-in look

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
/* x y blur color */

Shadow on text

Example: No spread value for text

text-shadow:
  0 0 10px #fff,
  0 0 20px #fff,
  0 0 30px #ff00de;

Layer for glow effects

Example: Creates neon text effect

filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));

Shadow follows shape (not box)

Example: Works with transparent PNGs

filter: blur(5px);

Gaussian blur effect

Example: Great for backdrop effects

filter: brightness(1.2);

Adjust image brightness

Example: 1 = normal, >1 = brighter

filter: contrast(150%);

Adjust contrast

Example: 100% = normal

filter: grayscale(100%);

Remove color

Example: 0% = color, 100% = gray

filter: brightness(1.1) contrast(1.2) saturate(1.3);

Combine multiple filters

Example: Applied in order

backdrop-filter: blur(10px) brightness(0.8);

Apply filters to background

Example: Perfect for glassmorphism

transition: all 0.3s ease;
/* property duration timing-function delay */

Smooth property changes

Example: All = every animatable property

transition: transform 0.3s ease,
            opacity 0.2s linear;

Transition multiple properties

Example: Different timing per property

transition-timing-function: ease;
/* ease, linear, ease-in, ease-out,
   ease-in-out, cubic-bezier() */

Control animation acceleration

Example: cubic-bezier for custom curves

transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Custom timing curve

Example: Creates bounce effect

transition-delay: 0.2s;

Wait before starting

Example: Useful for sequential animations

transform: translateY(0);
transition: transform 0.3s ease;

:hover {
  transform: translateY(-5px);
}

Smooth transform changes

Example: Hardware-accelerated

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

Move element without layout shift

Example: Doesn't affect other elements

transform: rotate(45deg);
transform: rotateZ(45deg);

Rotate around Z-axis

Example: Positive = clockwise

transform: scale(1.5);
transform: scale(2, 0.5);
transform: scaleX(1.2);

Resize element

Example: 1 = normal size, 2 = double

transform: skew(10deg, 5deg);
transform: skewX(20deg);

Slant element

Example: Creates parallelogram effect

transform:
  translateX(50px)
  rotate(45deg)
  scale(1.2);

Combine transformations

Example: Applied right to left

transform-origin: center center;
transform-origin: top left;
transform-origin: 50% 50%;

Set transformation point

Example: Default is center

transform: translate3d(50px, 100px, -200px);
transform: translateZ(-100px);

Move in 3D space

Example: Z-axis = depth

transform: rotateX(45deg);
transform: rotateY(180deg);
transform: rotate3d(1, 1, 0, 45deg);

Rotate in 3D

Example: Card flip effects

perspective: 1000px;
transform-style: preserve-3d;

Enable 3D space

Example: Lower = more extreme 3D

backface-visibility: hidden;

Hide element when rotated

Example: Essential for card flips

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Define animation sequence

Example: Use from/to or percentages

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

Multiple animation points

Example: Comma separates same styles

animation: fadeIn 2s ease-in-out;
/* name duration timing-function delay
   iteration-count direction fill-mode */

Use defined keyframes

Example: Shorthand for all properties

animation-duration: 2s;

How long animation takes

Example: Can use ms or s

animation-timing-function: ease-in-out;
/* ease, linear, steps() */

Speed curve

Example: steps() for frame-by-frame

animation-delay: 0.5s;

Wait before starting

Example: Can be negative to start mid-way

animation-iteration-count: infinite;
animation-iteration-count: 3;

How many times to repeat

Example: Infinite = loops forever

animation-direction: alternate;
/* normal, reverse, alternate,
   alternate-reverse */

Play direction

Example: Alternate = forward then backward

animation-fill-mode: forwards;
/* none, forwards, backwards, both */

Style before/after animation

Example: Forwards = keep final state

animation-play-state: paused;
animation-play-state: running;

Pause/resume animation

Example: Toggle with JavaScript or :hover

animation:
  fadeIn 1s ease,
  slideIn 1s 0.5s ease;

Run multiple animations

Example: Comma-separated list

width: 300px;
font-size: 16px;

Absolute unit (1/96th of inch)

Example: Consistent across devices

width: 50%;
margin-left: 10%;

Relative to parent element

Example: Great for responsive layouts

font-size: 1.5em;
padding: 2em;

Relative to parent font-size

Example: Compounds in nested elements

font-size: 1.5rem;
margin: 2rem;

Relative to root font-size

Example: No compounding, more predictable

width: 100vw;
height: 100vh;
font-size: 5vmin;

Relative to viewport size

Example: vmin/vmax = smaller/larger dimension

width: calc(100% - 80px);
height: calc(100vh - 100px);

Mathematical calculations

Example: Mix units (%, px, rem)

width: min(500px, 100%);
font-size: max(16px, 1vw);

Choose smaller/larger value

Example: Responsive without media queries

font-size: clamp(14px, 2vw, 24px);
/* min preferred max */

Fluid value with constraints

Example: Perfect for responsive typography

width: 60ch;
max-width: 70ch;

Width of '0' character

Example: Great for readable line length

grid-template-columns: 1fr 2fr 1fr;

Flexible fraction of available space

Example: Only works in grid/flexbox

.btn:hover {
  background: #2980b9;
  transform: scale(1.05);
}

Mouse over state

Example: Most common interactive state

input:focus {
  border-color: #3498db;
  outline: 2px solid #3498db;
}

Element has keyboard focus

Example: Important for accessibility

button:active {
  transform: scale(0.98);
}

Element is being activated

Example: Click/tap feedback

p:first-child {
  margin-top: 0;
}

First child of parent

Example: Remove top margin from first item

p:last-child {
  margin-bottom: 0;
}

Last child of parent

Example: Remove bottom margin from last item

li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n) { color: red; }
li:nth-child(2n+1) { font-weight: bold; }

Select specific children by pattern

Example: odd/even or formula (an+b)

p:nth-of-type(2) {
  font-size: 18px;
}

Nth element of that type

Example: Only counts same element type

.btn:not(.disabled) {
  cursor: pointer;
}

Exclude elements matching selector

Example: Negative selection

:is(h1, h2, h3):hover {
  color: blue;
}
:where(article, section) p {
  line-height: 1.6;
}

:is has specificity, :where has none

Example: Simplify selector lists

article:has(img) {
  display: grid;
}
li:has(> ul) {
  font-weight: bold;
}

Parent selector (if contains)

Example: Style parent based on children

input:checked + label {
  color: green;
  font-weight: bold;
}

Selected checkboxes/radio buttons

Example: Style based on form state

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Disabled form elements

Example: Visual feedback for disabled state

div:empty {
  display: none;
}

Element with no children

Example: Hide empty containers

form:focus-within {
  box-shadow: 0 0 0 3px rgba(52,152,219,0.3);
}

Element or descendant has focus

Example: Highlight parent when child focused

.icon::before {
  content: '→';
  margin-right: 8px;
  color: blue;
}

Insert content before element

Example: Content property is required

.badge::after {
  content: 'NEW';
  background: red;
  padding: 2px 6px;
}

Insert content after element

Example: Can be styled like real elements

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

Style first line of text

Example: Great for drop caps effect

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
}

Style first letter

Example: Classic drop cap

::selection {
  background: #3498db;
  color: white;
}

Style highlighted text

Example: User text selection appearance

input::placeholder {
  color: #999;
  font-style: italic;
}

Style input placeholder text

Example: Can't be animated

li::marker {
  color: #3498db;
  font-size: 1.2em;
}

Style list item bullets/numbers

Example: Better than list-style-type

@media (max-width: 768px) {
  .container { padding: 20px; }
  .sidebar { display: none; }
}

Styles for specific screen sizes

Example: max-width = styles below breakpoint

@media (min-width: 1024px) {
  .container { max-width: 1200px; }
}

Mobile-first approach

Example: Add styles as screen grows

@media screen and (max-width: 768px) {
  /* mobile styles */
}
@media print {
  /* print styles */
}

Target specific media types

Example: screen, print, speech

@media (orientation: landscape) {
  .video { width: 100%; }
}
@media (orientation: portrait) {
  .sidebar { width: 100%; }
}

Landscape vs portrait

Example: Great for mobile devices

@media (min-width: 768px) and (max-width: 1024px) {
  .container { width: 90%; }
}

Combine conditions with 'and'

Example: Target specific range

@container (min-width: 400px) {
  .card { display: flex; }
}
container-type: inline-size;

Respond to container size, not viewport

Example: More flexible than media queries

@media (aspect-ratio: 16/9) {
  .video-container { width: 100%; }
}

Target specific aspect ratios

Example: Great for video layouts

@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #fff; }
}

Detect system dark mode

Example: Respect user preference

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Respect accessibility settings

Example: Disable animations for users who need it

:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --spacing: 20px;
  --font-main: 'Inter', sans-serif;
}

Global variables in :root

Example: Available throughout document

.button {
  background: var(--primary);
  padding: var(--spacing);
  font-family: var(--font-main);
}

Apply variables with var()

Example: Changes propagate everywhere

color: var(--text-color, #333);
background: var(--bg, var(--fallback-bg, white));

Provide fallback if variable undefined

Example: Can chain multiple fallbacks

.dark-theme {
  --bg: #1a1a1a;
  --text: #ffffff;
}
.dark-theme .card {
  background: var(--bg);
}

Variables scoped to selector

Example: Override globals locally

width: calc(var(--sidebar-width) + var(--spacing) * 2);

Combine variables in calculations

Example: Dynamic computed values

:root {
  --hue: 200;
  --color: hsl(var(--hue), 70%, 50%);
  --color-light: hsl(var(--hue), 70%, 70%);
}

Create color systems

Example: Change hue to shift entire palette

.btn.primary.large {
  font-size: 18px;
}

Element must have all classes

Example: No space = same element

h1, h2, h3 {
  font-family: 'Georgia', serif;
  margin-top: 1em;
}

Apply same styles to multiple selectors

Example: Comma-separated list

h1 + p {
  font-size: 1.2em;
  margin-top: 0;
}

Immediately following sibling

Example: First paragraph after h1

h1 ~ p {
  color: #666;
}

All following siblings

Example: All paragraphs after h1

a[target] {
  color: red;
}

Has the attribute (any value)

Example: Select all links with target

input[type='email'] {
  border: 2px solid blue;
}

Exact attribute value match

Example: Specific input types

div[class*='card'] {
  border-radius: 8px;
}

Contains substring anywhere

Example: Matches card, card-lg, mycard

a[href^='https'] {
  color: green;
}
a[href^='#'] {
  color: purple;
}

Starts with value

Example: External links or anchors

a[href$='.pdf'] {
  background: url('pdf-icon.png');
}

Ends with value

Example: File type detection

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* OR */
.center {
  display: grid;
  place-items: center;
}

Perfect centering

Example: Works for any content

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Maintain width:height ratio

Example: No padding-top hack needed

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

How content fits container

Example: cover, contain, fill, none

.text {
  columns: 3;
  column-gap: 40px;
  column-rule: 1px solid #ddd;
}

Multi-column text layout

Example: Like newspaper columns

.vertical {
  writing-mode: vertical-rl;
}
.horizontal {
  writing-mode: horizontal-tb;
}

Text direction

Example: rl = right-to-left

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

Snap scrolling to elements

Example: Perfect for carousels

html {
  scroll-behavior: smooth;
}

Smooth scrolling to anchors

Example: Works with anchor links

cursor: pointer;
cursor: grab;
cursor: not-allowed;
cursor: url('custom.png'), auto;

Change mouse cursor

Example: 20+ built-in cursor types

user-select: none;
user-select: all;
user-select: text;

Control text selection

Example: none = can't select text

pointer-events: none;
pointer-events: auto;

Enable/disable mouse interaction

Example: none = clicks pass through

.card {
  padding: 20px;
  
  & h2 {
    margin-top: 0;
  }
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
}

Nest selectors like Sass

Example: & = parent selector

margin-inline: 20px; /* left + right */
margin-block: 30px; /* top + bottom */
padding-inline-start: 15px; /* left in LTR */

Direction-agnostic properties

Example: Adapts to text direction (RTL/LTR)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

Inherit parent grid tracks

Example: Align nested grids

color: color-mix(in srgb, blue 50%, red);
background: color-mix(in oklch, var(--primary) 80%, white);

Mix two colors

Example: Native color manipulation

input[type='checkbox'] {
  accent-color: #3498db;
}

Theme form controls

Example: Checkbox, radio, range inputs

position: absolute;
inset: 20px; /* all sides */
inset: 10px 20px; /* vertical horizontal */

Shorthand for top/right/bottom/left

Example: Cleaner than individual properties

overscroll-behavior: contain;
overscroll-behavior-y: none;

Control scroll chaining

Example: Prevent parent scroll when child ends

.glass {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

Glassmorphism effect

Example: Blur background behind element