Commonly Used CSS Properties

This guide covers the most important CSS properties you'll use in everyday development.

---

Position

Controls how elements are positioned in the document flow

Value	Behavior
static	Default, normal flow
relative	Offset from normal position
absolute	Positioned relative to nearest positioned ancestor
fixed	Positioned relative to viewport
sticky	Switches between relative and fixed

Static (default)

Relative (offset from normal position)

Absolute (relative to parent)

When to Use

• Relative: For offsetting elements slightly from their normal position
• Absolute: For overlays, tooltips, dropdowns
• Fixed: For headers, navigation bars, modals
• Sticky: For sticky headers, table headers

---

Z-Index

Controls stacking order of positioned elements

Higher z-index values appear on top. Only works on positioned elements (relative, absolute, fixed, sticky).

z-index: 1

z-index: 2

z-index: 3

Z-Index Gotchas

• Z-index only works on positioned elements
• Z-index creates a new stacking context
• Parent z-index can limit child stacking

---

Overflow

Controls how content that overflows its container is handled

overflow: visible

This text is very long and will overflow the container because overflow is set to visible.

overflow: hidden

This text is very long and will be clipped because overflow is set to hidden.

overflow: scroll

This text is very long and will have scrollbars because overflow is set to scroll. You can scroll to see more content.

Value	Behavior
visible	Content overflows (default)
hidden	Content is clipped
scroll	Always shows scrollbars
auto	Shows scrollbars only when needed

---

Background

Sets background color, image, or gradient

Solid Color Background

Gradient Background

Pattern Background

Checkerboard Pattern

Common Background Properties

background-color: #25c2a0;
background-image: url("image.jpg");
background-size: cover; /* or contain, or specific dimensions */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* for parallax effects */

---

Border & Border-Radius

Creates borders and rounded corners

Solid Border

Dashed Border

Dotted Border

Rounded (20px)

Circle

Colored Top Border

Border Properties

border: 2px solid #25c2a0; /* width style color */
border-radius: 8px; /* rounded corners */
border-top: 3px solid #25c2a0; /* individual sides */
border-radius: 50%; /* creates circle */

Border-Radius Trick

Use border-radius: 50% with equal width and height to create perfect circles.

---

Box-Shadow

Adds shadow effects to elements

Small Shadow
0 2px 4px rgba(0,0,0,0.1)

Medium Shadow
0 4px 8px rgba(0,0,0,0.15)

Large Shadow
0 8px 16px rgba(0,0,0,0.2)

Outline Shadow
0 0 0 3px #25c2a0

Inset Shadow
inset 0 2px 4px rgba(0,0,0,0.1)

Multiple Shadows
Multiple values

Box-Shadow Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* inset shadow */
box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.1),
  0 0 0 1px rgba(0, 0, 0, 0.05); /* multiple shadows */

---

Transition

Animates property changes smoothly

Hover me (all properties)

Border-radius transition

Opacity transition

Transition Syntax

transition: property duration timing-function delay;
transition: all 0.3s ease;
transition:
  background-color 0.3s ease,
  transform 0.2s linear;

Common Timing Functions

• ease - Slow start, fast middle, slow end (default)
• linear - Constant speed
• ease-in - Slow start
• ease-out - Slow end
• ease-in-out - Slow start and end

Performance

Only animate transform and opacity for best performance. Avoid animating width, height, top, left.

---

Transform

Applies 2D and 3D transformations

Normal

translateX(20px)

rotate(15deg)

scale(1.2)

skewX(10deg)

Combined

3D Transform

Transform Origin

Common Transform Functions

transform: translateX(20px); /* move horizontally */
transform: translateY(20px); /* move vertically */
transform: translate(20px, 20px); /* move both */
transform: rotate(45deg); /* rotate */
transform: scale(1.2); /* scale up/down */
transform: skewX(10deg); /* skew */
transform: translateX(20px) rotate(15deg); /* combine */

Transform vs Position

• Transform: Doesn't affect document flow, better performance
• Position: Affects document flow, can cause layout shifts

---

Text Properties

Controls text appearance and layout

text-align

Left

Center

Right

text-decoration

Underline

Line-through

Overline

font-weight

Light (300)

Normal (400)

Semi-bold (600)

Bold (700)

text-transform

uppercase

LOWERCASE

capitalize each word

letter-spacing & line-height

Wide spacing

Double line height for better readability in paragraphs.

Common Text Properties

text-align: center; /* left, center, right, justify */
text-decoration: underline; /* underline, line-through, none */
font-weight: 600; /* 100-900, normal, bold */
text-transform: uppercase; /* uppercase, lowercase, capitalize */
letter-spacing: 2px; /* space between letters */
line-height: 1.5; /* space between lines */
font-size: 16px; /* text size */
font-family: "Arial", sans-serif; /* font stack */

---

Opacity & Visibility

Controls element transparency and visibility

Opacity

100%

70%

40%

10%

Opacity affects element and all children. Still takes up space.

Visibility

Visible

Hidden

None

Hidden: invisible but takes space. None: removed from layout.

Differences

Property	Takes Space	Can Interact	Affects Children
opacity: 0	✅ Yes	❌ No	✅ Yes
visibility: hidden	✅ Yes	❌ No	❌ No
display: none	❌ No	❌ No	❌ No

When to Use

• Opacity: For fade in/out animations
• Visibility: For hiding elements while keeping layout
• Display: none: For completely removing from layout

---

Cursor

Changes mouse cursor appearance

Common cursor values: pointer, not-allowed, wait, grab, zoom-in, text, move, help. Hover over buttons and links to see cursor: pointer in action.

Common Cursor Values

cursor: pointer; /* hand pointer (clickable) */
cursor: not-allowed; /* forbidden (disabled) */
cursor: wait; /* loading spinner */
cursor: text; /* text selection */
cursor: move; /* move/drag */
cursor: grab; /* grab hand */
cursor: zoom-in; /* magnifying glass */
cursor: help; /* question mark */

---

🧠 Quick Reference

Layout Properties

• width, height, max-width, max-height, min-width, min-height
• margin, padding (with shorthand: margin: top right bottom left)
• display (block, inline, flex, grid, none)

Visual Properties

• color - Text color
• background - Background (color, image, gradient)
• border - Border styling
• box-shadow - Shadow effects
• opacity - Transparency

Typography

• font-family, font-size, font-weight
• text-align, text-decoration, text-transform
• line-height, letter-spacing

Effects

• transition - Smooth property changes
• transform - 2D/3D transformations
• filter - Visual filters (blur, brightness, etc.)

Positioning

• position - Positioning method
• top, right, bottom, left - Offsets
• z-index - Stacking order