CSS Text

CSS Text Properties – Complete Guide

CSS provides various properties to style and format text, including font styles, alignment, spacing, and decorations.

1. Changing Text Color (color)

p {
  color: red;
}

✅ Changes the text color to red.

2. Text Alignment (text-align)

h1 {
  text-align: center;
}

✅ Aligns text to the center.
🔹 Values: left, right, center, justify.

3. Text Decoration (text-decoration)

a {
  text-decoration: none;
}

✅ Removes the underline from links.
🔹 Other values: underline, overline, line-through, blink.

4. Text Transformation (text-transform)

h2 {
  text-transform: uppercase;
}

✅ Converts text to uppercase.
🔹 Other values: capitalize, lowercase.

5. Text Indentation (text-indent)

p {
  text-indent: 30px;
}

✅ Adds a 30px indentation at the start of the paragraph.

6. Letter Spacing (letter-spacing)

h3 {
  letter-spacing: 2px;
}

✅ Increases the space between letters.

7. Word Spacing (word-spacing)

p {
  word-spacing: 5px;
}

✅ Adds 5px space between words.

8. Line Height (line-height)

p {
  line-height: 1.8;
}

✅ Adjusts spacing between lines.

9. Text Shadow (text-shadow)

h1 {
  text-shadow: 2px 2px 5px gray;
}

✅ Adds a shadow to text.
🔹 Format: x-offset y-offset blur-radius color

10. Controlling Text Overflow (text-overflow)

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

✅ Ensures long text ends with ....

Full Example:

p {
  color: blue;
  text-align: justify;
  text-transform: capitalize;
  letter-spacing: 1px;
  word-spacing: 3px;
  line-height: 1.6;
}