CSS Cheat Sheet — Modern CSS Quick Reference

Selectors

▶

element

Select all elements of that type

.class

Select by class name

#id

Select by ID

*

Select all elements

div, p

Multiple selectors (both div AND p)

div p

Descendant selector (p inside div)

div > p

Direct child selector

div + p

Adjacent sibling (p right after div)

div ~ p

General sibling (all p after div)

[attr]

Has attribute

[attr="value"]

Attribute equals value

[attr*="val"]

Attribute contains 'val'

:hover

Mouse over element

:focus

Element has focus

:first-child

First child of parent

:last-child

Last child of parent

:nth-child(2n)

Every even child

:not(.class)

Negation selector

::before

Insert content before element

::after

Insert content after element

::placeholder

Style input placeholder text

Box Model

▶

width: 100px

Element width

height: auto

Element height

padding: 10px 20px

Inner spacing (top/bottom left/right)

margin: 10px auto

Outer spacing (auto centers horizontally)

border: 1px solid #333

Border shorthand

border-radius: 8px

Rounded corners

box-sizing: border-box

Include padding/border in width

outline: 2px solid blue

Outline (doesn't affect layout)

box-shadow: 0 4px 6px rgba(0,0,0,0.1)

Drop shadow

overflow: hidden

Hide overflow content

overflow: auto

Scrollbar when needed

Flexbox

▶

display: flex

Enable flexbox on container

flex-direction: row

Horizontal layout (default)

flex-direction: column

Vertical layout

justify-content: center

Center items on main axis

justify-content: space-between

Equal space between items

justify-content: space-around

Equal space around items

align-items: center

Center items on cross axis

align-items: stretch

Stretch items to fill (default)

flex-wrap: wrap

Allow items to wrap to next line

gap: 16px

Gap between flex items

flex: 1

Item grows to fill available space

flex: 0 0 200px

Item: no grow, no shrink, 200px basis

align-self: flex-end

Align single item differently

order: -1

Move item before others

Grid

▶

display: grid

Enable CSS grid

grid-template-columns: 1fr 1fr 1fr

3 equal columns

grid-template-columns: repeat(3, 1fr)

Same as above (shorthand)

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

Responsive grid

grid-template-rows: auto 1fr auto

Header, content, footer

gap: 16px

Gap between grid cells

grid-column: span 2

Item spans 2 columns

grid-row: 1 / 3

Item from row 1 to row 3

grid-area: header

Name grid area

place-items: center

Center all items

place-self: center

Center single item

Typography

▶

font-family: 'Inter', sans-serif

Set font family

font-size: 16px

Font size in pixels

font-size: 1rem

Font size relative to root

font-weight: 700

Bold text

font-style: italic

Italic text

line-height: 1.6

Line spacing

letter-spacing: 0.05em

Letter spacing

text-align: center

Center text

text-decoration: none

Remove underline

text-transform: uppercase

Uppercase text

text-overflow: ellipsis

Truncate with ... (needs overflow:hidden)

white-space: nowrap

Prevent text wrapping

word-break: break-word

Break long words

Colors & Backgrounds

▶

color: #00d4ff

Text color (hex)

color: rgb(0, 212, 255)

Text color (RGB)

color: rgba(0, 0, 0, 0.5)

Text color with opacity

color: hsl(190, 100%, 50%)

Text color (HSL)

background: #0a0a0a

Background color

background: linear-gradient(135deg, #667eea, #764ba2)

Gradient background

background: radial-gradient(circle, #fff, #000)

Radial gradient

background-image: url('img.jpg')

Background image

background-size: cover

Cover entire element

background-position: center

Center background

opacity: 0.8

Element opacity

Positioning

▶

position: static

Default (normal flow)

position: relative

Relative to normal position

position: absolute

Relative to nearest positioned ancestor

position: fixed

Fixed to viewport

position: sticky

Sticky on scroll

top: 0; right: 0

Position offsets

z-index: 10

Stack order (higher = on top)

Transitions & Animations

▶

transition: all 0.3s ease

Smooth property changes

transition: transform 0.2s ease-in-out

Specific property transition

transform: translateX(100px)

Move element horizontally

transform: scale(1.1)

Scale element

transform: rotate(45deg)

Rotate element

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

Define animation

animation: fade 0.5s ease forwards

Apply animation

animation-delay: 0.2s

Delay before animation starts

Responsive Design

▶

@media (max-width: 768px) { }

Mobile styles

@media (min-width: 769px) and (max-width: 1024px) { }

Tablet styles

@media (prefers-color-scheme: dark) { }

Dark mode

@media (prefers-reduced-motion: reduce) { }

Reduced motion

clamp(1rem, 2.5vw, 2rem)

Fluid sizing (min, preferred, max)

min(90%, 1200px)

Responsive max-width

100vh

Full viewport height

100vw

Full viewport width

Modern CSS

▶

:root { --primary: #00d4ff; }

CSS custom properties (variables)

var(--primary)

Use CSS variable

aspect-ratio: 16 / 9

Maintain aspect ratio

container-type: inline-size

Container queries

@container (min-width: 400px) { }

Container query media

accent-color: #00d4ff

Style form controls color

scroll-behavior: smooth

Smooth scrolling

scroll-snap-type: x mandatory

Scroll snap on horizontal

:has(.child)

Parent selector (has child)

text-wrap: balance

Balance text wrapping

🎨 CSS Cheat Sheet