CSS Text Styles

CSS Text Styling CSS allows you to style and control how text appears on your webpage. Below are the most commonly used properties:

1. Font Family (font-family)

• Sets the typeface (font) of the text.
• Always provide fallback fonts.

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

2. Font Size (font-size)

• Controls how big or small the text is.
• Units: px, em, rem, %, etc.

h1 {
  font-size: 32px;
}

p {
  font-size: 1.2rem;
}

3. Font Weight (font-weight)

• Sets the thickness/boldness of text.

strong {
  font-weight: bold;    /* or use numeric: 400, 700 */
}

4. Font Style (font-style)

• Makes text italic, normal, or oblique.

em {
  font-style: italic;
}

5. Line Height (line-height)

• Controls vertical spacing between lines of text.

p {
  line-height: 1.6;  /* or use px like 24px */
}

6. Text Alignment (text-align)

• Aligns text inside its container.

p {
  text-align: left;    /* left, center, right, justify */
}

7. Text Color (color)

• Sets the color of the text.

h2 {
  color: #333333;    /* You can also use named colors or rgb() */
}

8. Text Decoration (text-decoration)

• Used for underlining, removing underlines, etc.

a {
  text-decoration: none;   /* none, underline, overline, line-through */
}

9. Text Transform (text-transform)

• Changes the case of letters.

p {
  text-transform: uppercase;  /* lowercase, capitalize */
}