CSS3 Cheatsheet - CSS3 Properties & Layout Reference
For developers who write CSS by hand and want structured, responsive styling. The core skill is not memorizing every property but reasoning about the cascade, the box model, and when Flexbox versus Grid saves you layout pain. By the end you can center and align layouts confidently, build a responsive two-column page, and add purposeful transitions instead of guessing.
Selectors 8
.classClass selector
#idID selector
div pDescendant selector
div > pChild selector
a:hoverHover pseudo-class
::before / ::afterPseudo-elements
[type="text"]Attribute selector
nth-child(2n)Even-child selector
Box Model 6
width / heightContent box size
paddingInner spacing
borderBorder
marginOuter spacing
box-sizing: border-boxInclude border & padding in size
border-radiusRounded corners
Layout 8
display: blockBlock-level box
display: inline-blockInline but sizeable
display: flexFlex container
display: gridGrid container
display: noneHide element (no box)
position: relative / absolute / fixedPositioning context
float: left / rightFloat
z-indexStacking order
Colors & Background 7
colorText color
backgroundBackground shorthand
background-image: url()Background image
background-size: coverCover container
opacityElement transparency
box-shadowDrop shadow
linear-gradient()Gradient background
Text 6
font-sizeFont size
font-weightFont weight
text-alignHorizontal alignment
line-heightLine spacing
letter-spacingCharacter spacing
white-space: nowrapNo wrapping
Transitions & Animations 6
transition: all 0.3sSmooth transition
transform: translateX(10px)Translate
transform: scale(1.2)Scale
transform: rotate(45deg)Rotate
@keyframes name { 0% {} 100% {} }Define animation
animation: name 1s infiniteApply animation
Responsive 6
@media (max-width: 768px) { }Media query
max-width: 100%Max width
min-width: 0Min width
vw / vh / vmin / vmaxViewport units
rem / emRelative units
clamp(1rem, 2vw, 2rem)Responsive value clamp
Tips
- box-sizing: border-box makes width/height include border and padding — more intuitive.
- Flex fits one-dimensional layouts (row or column); Grid fits two-dimensional (rows and columns together).
- Mobile-first: write small-screen styles first, then extend with @media (min-width).
Official References
Each command links to its official documentation below, so you can verify the latest usage and read deeper.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Contact Us
Wrong command or description? Send us corrections, business inquiries or product feedback by email.
Contact Us