CSS Text

CSS Text

CSS text properties control how text looks on a web page. You can change text color, alignment, decoration, spacing, and add effects like shadows.

Text Color

The color property sets the color of text.

p {
  color: #333;
}

h2 {
  color: rgb(31, 75, 216);
}

Text Alignment

The text-align property controls horizontal alignment of inline content like text.

.left   { text-align: left; }
.center { text-align: center; }
.right  { text-align: right; }
.justify{ text-align: justify; }

Common values are left, center, right, and justify.

Text Decoration

The text-decoration property adds or removes decoration lines such as underline.

a {
  text-decoration: none;
}

.underlined {
  text-decoration: underline;
}

Text Decoration Styles

You can control the decoration line style, thickness, and color.

a {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #1f4bd8;
  text-decoration-thickness: 2px;
}

Decoration styles include solid, dotted, dashed, double, and wavy.

Text Transformation

The text-transform property controls capitalization.

.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap   { text-transform: capitalize; }

Text Spacing

Spacing properties improve readability and visual hierarchy.

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

p {
  line-height: 1.7;
}

h2 {
  letter-spacing: 0.3px;
}

.title {
  word-spacing: 4px;
}

Text Shadow

The text-shadow property adds shadow to text. It uses horizontal offset, vertical offset, blur, and color.

h1 {
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
}

Use text shadows carefully to keep text readable.

Code Challenge

Goal: Style the text in the card below for better readability and visual hierarchy.

HTML:

<div class="card">
  <h3 class="title">CSS Text</h3>
  <p>Text properties help you control readability and style.</p>
  <a href="#" class="link">Read more</a>
</div>

Task:

• Set a darker text color for the paragraph
• Center the title
• Remove underline from the link and add a custom underline style on hover
• Improve readability using line-height
• Add a subtle text shadow to the title

Try a Solution:

.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-width: 520px;
}

.title {
  text-align: center;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
  margin-top: 0;
}

.card p {
  color: #333;
  line-height: 1.7;
}

.link {
  color: #1f4bd8;
  text-decoration: none;
}

.link:hover {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #1f4bd8;
  text-decoration-thickness: 2px;
}

What’s Next?

Next, you will learn how to work with fonts in CSS.