CSS Cheat Sheet
Quick reference from FreeCodingCourses.com
Selectors
.class- every element with that class.
#id- the one element with that id.
div p- any p inside a div (descendant).
div > p- a p that is a direct child of a div.
a:hover- an anchor while the pointer is over it.
input:focus- the form field that has focus.
li:nth-child(2)- the second li in its parent.
a[target="_blank"]- match by attribute value.
Box model
box-sizing: border-box- width includes padding and border.
margin: 0 auto- center a fixed-width block.
padding: 8px 16px- vertical then horizontal.
border: 1px solid #ccc- width, style, color.
max-width: 640px- cap the width while staying fluid.
overflow: hidden- clip content that spills out.
Flexbox
display: flex- make a flex container.
flex-direction: row | column- set the main axis.
justify-content: space-between- spacing along the main axis.
align-items: center- alignment on the cross axis.
gap: 16px- space between items, no margins needed.
flex: 1- item grows to fill the free space.
flex-wrap: wrap- let items flow onto new lines.
Grid
display: grid- make a grid container.
grid-template-columns: 1fr 1fr- two equal columns.
repeat(3, 1fr)- shorthand for three equal columns.
repeat(auto-fit, minmax(200px, 1fr))- responsive columns, no media query.
gap: 24px- row and column gutters.
grid-column: span 2- make one item two columns wide.
Positioning
position: relative- nudge from the normal spot, keep the space.
position: absolute- placed against the nearest positioned parent.
position: fixed- pinned to the viewport.
position: sticky; top: 0- sticks once it reaches the top.
z-index: 10- stacking order (needs a position).
inset: 0- shorthand for top/right/bottom/left: 0.
Typography and color
font-size: 1.25rem- rem scales with the root font size.
line-height: 1.5- unitless multiplies the font size.
color: #333- text color.
text-align: center- horizontal text alignment.
font-weight: 600- 400 is normal, 700 is bold.
rgb(0 0 0 / 50%)- a color with 50 percent alpha.
Custom properties and motion
--brand: #2563eb- declare a variable, usually on :root.
color: var(--brand)- use the variable anywhere.
var(--gap, 16px)- fallback if the variable is unset.
@media (min-width: 768px)- apply rules above a width.
transition: all 0.2s ease- animate property changes.
transform: translateY(-2px)- move without reflowing the layout.
Gotchas worth knowing
- •box-sizing: border-box makes width include padding and border, which is almost always what you expect. Set it once on *, *::before, *::after and stop doing the math by hand.
- •Use gap for spacing inside Flexbox and Grid instead of margins on the children. It only puts space between items, so you never fight an extra margin on the first or last one.
- •Specificity decides which rule wins, not source order alone. An id beats a class, and a class beats a tag. When a style will not apply, a more specific selector somewhere else is usually why.
- •A percentage height needs the parent to have a height too. If height: 100% does nothing, the parent has no set height for the percentage to reference.
- •margin: 0 auto centers a block only when it has a width or max-width. Without one, the block already fills the row and there is nothing left to center.