⚡
Quick TrainerCSS Properties and What They Control
Learn the most common CSS properties and the styling each one controls.
Code36 items3 levelsDifficulty 2/5
Free · no signup · works on any device
Levels
Start easy — harder levels unlock as you improve, or jump ahead anytime.
1
Essentials
10 items
2
Layout & Box Model
15 items
3
Advanced
11 items
All 36 cards
color
text color
background-color
element background color
font-size
text size
font-weight
text boldness
font-family
typeface
text-align
horizontal text alignment
width
element width
height
element height
opacity
transparency level
border
element border
margin
space outside an element
padding
space inside an element
display
box display type
position
positioning method
float
horizontal float of an element
box-sizing
how width and height are calculated
overflow
handling of content that exceeds the box
z-index
stacking order
flex-direction
main axis direction of flex items
justify-content
alignment along the main axis
align-items
alignment along the cross axis
gap
space between grid or flex items
border-radius
corner rounding
line-height
vertical spacing between lines
letter-spacing
space between characters
box-shadow
shadow around an element
text-shadow
shadow behind text
transform
rotate, scale, or translate an element
transition
animation between property changes
animation
keyframe-based animation
cursor
mouse pointer style
visibility
whether an element is visible
object-fit
how a replaced element fits its box
grid-template-columns
column layout of a grid
backdrop-filter
graphical effect on area behind an element
white-space
how whitespace and line wrapping are handled
