CSS Text Styles

CSS text styles allow you to control the appearance and formatting of text on a web page. Whether it's aligning text, decorating it, or adding shadow effects, CSS provides several properties to make your text visually appealing.

1. Common Text Properties

Below are the commonly used properties for styling text:

• text-align: Aligns the text horizontally (e.g., left, center, right).
• text-decoration: Adds or removes underlines, overlines, or line-through.
• text-transform: Controls the capitalization of text.
• letter-spacing: Adjusts the space between letters.
• word-spacing: Adjusts the space between words.
• text-shadow: Adds shadow to text for a 3D effect.
• line-height: Sets the spacing between lines of text.

2. Examples

1. Text Alignment: Align text to the center of an element.

/* Text Alignment */
p {
  text-align: center;
}

2. Text Decoration: Add or remove text underline.

/* Text Decoration */
a {
  text-decoration: none;
}

3. Text Transformation: Change text to uppercase.

/* Text Transformation */
h1 {
  text-transform: uppercase;
}

4. Letter Spacing: Increase space between letters.

/* Letter Spacing */
h1 {
  letter-spacing: 2px;
}

5. Text Shadow: Add a shadow for depth.

/* Text Shadow */
h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

3. Best Practices

- Ensure text styles enhance readability and accessibility.
- Use consistent typography across your design.
- Avoid overusing text-shadow for a cleaner look.