1. Font Properties

A. Font Family

This property sets the typeface.

p {
  font-family: "Arial", sans-serif;
}

• Common Stacks:

• body {
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  
  

B. Font Size

Controls text size:

h1 {
  font-size: 2rem; /* Relative unit to the root element */
}
p {
  font-size: 16px; /* Absolute unit */
}

Units:

• px (pixels) – fixed size

• rem/em – relative to root/element

• % – percentage of parent

C. Font Weight

Sets thickness of the text.

.text {
  font-weight: bold; /* or 400 (normal), 700 (bold) */
}

D. Font Style

.quote {
  font-style: italic;
}

2. Text Alignment & Decoration

A. Text Alignment

.center {
  text-align: center; /* left | right | justify */
}

B. Text Decoration

.link {
  text-decoration: underline; /* overline | line-through | none */
}
.special {
  text-decoration: underline wavy red; /* Combined style */
}

C. Text Transform

.title {
  text-transform: uppercase; /* lowercase | capitalize */
}

3. Spacing & Layout

A. Line Height

Sets the vertical space between lines

article {
  line-height: 1.6; /* Unitless = multiplier */
}

B. Letter Spacing

Horizontal space between characters

.heading {
  letter-spacing: 2px; /* Also accepts negative values */
}

C. Word Spacing

.poem {
  word-spacing: 0.5em;
}