CSS Text

Master text styling to make your content readable, beautiful, and professional.

What is CSS Text?

CSS Text properties are used to control the appearance, alignment, spacing, decoration, and transformation of text on a webpage.

  • Improve readability
  • Enhance visual design
  • Structure written content
  • Create professional UI layouts

Real-Life Example: Just like choosing font size, spacing, and alignment in a document editor, CSS controls how text looks on websites.

Text Color

The color property defines the color of text.

Text Color Example


p {
    color: #2563eb;
}

Tip: Always maintain enough contrast between text and background for readability.

Text Alignment

The text-align property controls horizontal alignment of text.

  • left – default alignment
  • center – commonly used for headings
  • right – used in UI elements
  • justify – newspaper-style text

Text Alignment Example


h1 {
    text-align: center;
}

p {
    text-align: justify;
}

Text Decoration

The text-decoration property adds lines to text.

  • underline
  • overline
  • line-through
  • none

Text Decoration Example


a {
    text-decoration: none;
}

.price {
    text-decoration: line-through;
}

Text Transformation

The text-transform property changes letter casing.

  • uppercase
  • lowercase
  • capitalize

Text Transform Example


.heading {
    text-transform: uppercase;
}

Text Spacing

Spacing properties improve readability and visual balance.

  • line-height – space between lines
  • letter-spacing – space between letters
  • word-spacing – space between words

Text Spacing Example


p {
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

Text Shadow

The text-shadow property adds shadow effects to text.

Text Shadow Example


h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Tip: Use subtle shadows for better readability, not decoration overload.

Best Practices for CSS Text

  • Maintain proper contrast
  • Use readable line-height
  • Avoid excessive text decoration
  • Keep typography consistent

Pro Tip: Great typography improves user trust and engagement.