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.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
}
</style>
</head>
<body>

<p>This is my first CSS page.</p>

</body>
</html>

Try this code

Text Alignment

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
   text-align: center; /* left, right, justify */
}
</style>
</head>
<body>

<p>This is my first CSS page.</p>

</body>
</html>

Try this code

Text Decoration

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1{
  text-decoration: line-through;
}
</style>
</head>
<body>

<h1>This is my first CSS page.</h1>

</body>
</html>

Try this code

Text Transform

The text-transform property controls the capitalization of text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}
</style>
</head>
<body>

<p class="uppercase">This is my first CSS page.</p>

</body>
</html>

Try this code

Letter Spacing and Line Height

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  letter-spacing: 4px;
  line-height: 1.5;
}
</style>
</head>
<body>

<p>This is my first CSS page.</p>
<p>This is my first CSS page.</p>

</body>
</html>

Try this code

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

Tip: Combine font-family, line-height, and letter-spacing to create clean and readable text layouts.