Selectors
- Type selector - Example:
p { ... }
- Class - Example:
.box { ... }
- ID - Example:
#header { ... }
- Attribute - Example:
[type="text"]
Learn more about Selectors →
Pseudo Classes
- Hover - Example:
a:hover { ... }
- Focus - Example:
input:focus { ... }
- First-child - Example:
li:first-child { ... }
- Nth-child - Example:
li:nth-child(2) { ... }
Learn more about Pseudo Classes →
Box Model
- Content - The actual content (text, images)
- Padding - Space around content, inside border
- Border - Line around padding
- Margin - Space outside border
Learn more about Box Model →
Grid
- Container - Example:
display: grid;
- Columns - Example:
grid-template-columns: 1fr 1fr;
- Gap - Example:
gap: 20px;
- Areas - Example:
grid-template-areas: "header";
Learn more about Grid Layout →
Flexbox Layout
- Container - Example:
display: flex;
- Direction - Example:
flex-direction: row;
- Justify - Example:
justify-content: center;
- Align - Example:
align-items: center;
Learn more about Flexbox →
Media Queries
- Mobile - Example:
@media (max-width: 768px)
- Desktop - Example:
@media (min-width: 1024px)
- Print - Example:
@media print
- Dark mode - Example:
@media (prefers-color-scheme: dark)
Learn more about Media Queries →
Color
- Named - Example:
color: red;
- Hex - Example:
color: #3498db;
- RGB - Example:
color: rgb(255, 0, 0);
- HSL - Example:
color: hsl(120, 100%, 50%);
Learn more about Color →
2D Transforms
- Rotate - Example:
transform: rotate(45deg);
- Scale - Example:
transform: scale(1.5);
- Translate - Example:
transform: translate(20px, 10px);
- Skew - Example:
transform: skew(10deg);
Learn more about 2D Transforms →
3D Transforms
- RotateX - Example:
transform: rotateX(45deg);
- RotateY - Example:
transform: rotateY(45deg);
- TranslateZ - Example:
transform: translateZ(50px);
- Perspective - Example:
perspective: 1000px;
Learn more about 3D Transforms →
Animation
- Keyframes - Example:
@keyframes slide { ... }
- Name - Example:
animation-name: slide;
- Duration - Example:
animation-duration: 2s;
- Timing - Example:
animation-timing-function: ease;
Learn more about Animation →
Typography
- Font family - Example:
font-family: Arial, sans-serif;
- Font size - Example:
font-size: 16px;
- Line height - Example:
line-height: 1.6;
- Letter spacing - Example:
letter-spacing: 2px;
Learn more about Typography →
Text Effects
- Text shadow - Example:
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
- Text transform - Example:
text-transform: uppercase;
- Text decoration - Example:
text-decoration: underline;
- Text stroke - Example:
-webkit-text-stroke: 1px black;
Learn more about Text Effects →
Gradients
- Linear - Example:
background: linear-gradient(red, blue);
- Radial - Example:
background: radial-gradient(circle, red, blue);
- Conic - Example:
background: conic-gradient(red, blue);
- Repeating - Example:
background: repeating-linear-gradient(...);
Values and Sizing
- Pixels - Example:
width: 200px;
- Percentages - Example:
width: 50%;
- Em units - Example:
font-size: 1.5em;
- Rem units - Example:
font-size: 1.5rem;
Multiple Columns
- Column count - Example:
column-count: 3;
- Column gap - Example:
column-gap: 20px;
- Column width - Example:
column-width: 200px;
- Column rule - Example:
column-rule: 1px solid black;
Opacity
- Full opacity - Example:
opacity: 1;
- Half opacity - Example:
opacity: 0.5;
- No opacity - Example:
opacity: 0;
- RGBA - Example:
background: rgba(0,0,0,0.5);
Filter Effects
- Blur - Example:
filter: blur(5px);
- Brightness - Example:
filter: brightness(150%);
- Contrast - Example:
filter: contrast(200%);
- Grayscale - Example:
filter: grayscale(100%);
Blend Modes
- Multiply - Example:
mix-blend-mode: multiply;
- Screen - Example:
mix-blend-mode: screen;
- Overlay - Example:
mix-blend-mode: overlay;
- Difference - Example:
mix-blend-mode: difference;
Masking
- Clip path - Example:
clip-path: circle(50%);
- Mask image - Example:
mask-image: url(mask.png);
- Mask size - Example:
mask-size: cover;
- Mask position - Example:
mask-position: center;