CSS Properties
Selectors
element—Select all <element> tags
.class—Select by class name
#id—Select by unique ID
A B—Descendant selector (B inside A)
A > B—Direct child selector
A + B—Adjacent sibling (next)
A ~ B—General sibling selector
[attr="val"]—Attribute value selector
:hover—Mouse hover state
:focus—Focused element
:nth-child(n)—Nth child element
::before / ::after—Insert pseudo-content
Box Model
width / height—Element dimensions
margin—Space outside the border
padding—Space inside the border
border—Border around element
box-sizing: border-box—Include padding in width
max-width / min-width—Width constraints
overflow—Handle content overflow
outline—Non-layout border (focus rings)
Display & Position
display: block—Full-width block element
display: inline—Inline flow element
display: inline-block—Inline with block features
display: none—Remove from layout
display: flex—Flexbox container
display: grid—Grid container
position: static—Default normal flow
position: relative—Offset from normal position
position: absolute—Relative to positioned parent
position: fixed—Fixed to viewport
position: sticky—Sticky within scroll
z-index—Stack order (higher = on top)
Flexbox
flex-direction—row | column | row-reverse
justify-content—Main axis alignment
align-items—Cross axis alignment
flex-wrap—Wrap items to new lines
gap—Space between flex items
flex: 1—Grow to fill available space
flex-shrink—Shrink factor when tight
align-self—Override align for one item
order—Change visual order
Grid
grid-template-columns—Define column sizes
grid-template-rows—Define row sizes
grid-gap / gap—Space between grid cells
grid-column—Column start / end span
grid-row—Row start / end span
grid-area—Named area placement
grid-template-areas—Named grid layout map
repeat(n, size)—Repeat column/row pattern
fr—Fractional unit of space
minmax(min, max)—Size range constraint
Typography
font-family—Font stack (fallbacks)
font-size—Text size (px, rem, em)
font-weight—Bold (100-900)
line-height—Vertical line spacing
text-align—left | center | right
text-decoration—Underline, strikethrough
text-transform—uppercase | lowercase | capitalize
letter-spacing—Space between characters
word-spacing—Space between words
white-space—Whitespace handling (nowrap)
text-overflow: ellipsis—Truncate with "..."
Colors & Background
color—Text color
background-color—Background fill color
background-image—Image or gradient bg
background-size—cover | contain | custom
background-position—Position within element
opacity—Transparency (0 to 1)
rgba(r,g,b,a)—Color with alpha channel
linear-gradient()—Linear color gradient
Transforms & Animations
transform: translate()—Move element X/Y
transform: scale()—Resize element
transform: rotate()—Rotate element (deg)
transition—Animate property changes
transition-duration—Animation time (ms/s)
animation—Keyframe animation shorthand
@keyframes—Define animation steps
border-radius—Rounded corners
box-shadow—Drop shadow on element
filter—Blur, brightness, grayscale
Responsive Design
@media (max-width)—Styles below breakpoint
@media (min-width)—Styles above breakpoint
vw / vh—Viewport width/height units
rem / em—Relative size units
clamp(min, pref, max)—Fluid sizing
@container—Container query
aspect-ratio—Width to height ratio
object-fit—Image fit inside container
allprintabledoc.com