CSS Text

CSS text properties allow you to style the text content of HTML elements. You can control font, size, color, spacing, alignment, decoration, and more to improve readability and design.

Text Color

The color property sets the color of the text.

p {
  color: #333333;
}

Font Family

The font-family property specifies the font of the text. You can provide multiple fonts as a fallback.

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

Font Size

The font-size property controls the size of the text.

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

Font Weight

The font-weight property sets the thickness of the text. Common values: normal, bold, lighter, or numeric values like 100, 400, 700.

strong {
  font-weight: bold;
}

Text Alignment

The text-align property sets the horizontal alignment of text inside an element.

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

Text Decoration

The text-decoration property is used to add or remove decorations from text like underline, overline, or line-through.

a {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

Text Transform

The text-transform property controls the capitalization of text.

p.uppercase {
  text-transform: uppercase;
}

p.capitalize {
  text-transform: capitalize;
}

p.lowercase {
  text-transform: lowercase;
}

Letter Spacing and Line Height

You can control spacing between letters and lines for better readability.

p {
  letter-spacing: 1px;
  line-height: 1.5;
}

Best Practices for Text

• Use readable font sizes and line heights
• Choose legible fonts for your audience
• Maintain contrast between text and background
• Use text-transform and text-decoration sparingly

Common Mistakes with Text

• Too small or inconsistent font sizes
• Poor color contrast making text unreadable
• Overusing text decorations or transformations
• Ignoring spacing (letter-spacing & line-height) for readability