Reference Guide
CSS Cheat Sheet
Comprehensive CSS reference with interactive property cards, search, and instant copy. Master layout, typography, and modern CSS features.
CSS Selectors
*
Universal selector
element
Type selector
.class
Class selector
#id
ID selector
element.class
Element with class
element, element
Multiple selectors
element element
Descendant
element > element
Direct child
element + element
Adjacent sibling
Layout Properties
display
block | inline | flex | grid | none
width
auto | 100px | 50% | 100vw
height
auto | 100px | 50% | 100vh
max-width
none | 500px | 80%
box-sizing
content-box | border-box
overflow
visible | hidden | scroll | auto
visibility
visible | hidden | collapse
Flexbox
flex-direction
row | column | row-reverse
justify-content
flex-start | center | space-between
align-items
stretch | center | flex-end
flex-wrap
nowrap | wrap | wrap-reverse
flex-grow
0 | 1 | 2
flex-basis
auto | 100px | 50%
Typography
font-family
Arial | 'Times New Roman' | serif
font-size
16px | 1.2rem | 150%
font-weight
normal | bold | 400 | 700
line-height
1.5 | 24px | normal
text-align
left | center | right | justify
text-decoration
none | underline | line-through
Colors & Backgrounds
color
red | #ff0000 | rgb(255,0,0)
background-color
white | transparent | #000
background-image
url('img.jpg') | linear-gradient()
background-size
cover | contain | auto
opacity
1 | 0.5 | 0
CSS Grid
grid-template-columns
1fr 1fr | 100px auto
grid-gap
10px | 1rem
grid-column
1 / 3 | span 2
align-content
start | center | end | stretch
Pro Developer Tip
- Use
box-sizing: border-boxglobally to make layout sizing intuitive and prevent padding from breaking widths. - Prefer
remunits for typography to ensure accessibility and consistent scaling across different browser settings.
Quick Reference
Search ShortcutCtrl + F
Clear FilterEsc
Copy StyleClick any card