CSS Text

By /

In this chapter, you will learn how to style and control the appearance of text using CSS. You can change the text color, alignment, decoration, spacing, and much more. Let’s look at the most commonly used CSS text properties step by step.

1. Text Color

The color property is used to change the color of text.

Basic Syntax:

h1 {
  color: blue;
}

This changes the heading color to blue.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Color</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      color: green;
    }
  </style>
</head>

<body>

  <h1>Learning CSS</h1>

  <p>This paragraph is green.</p>

</body>
</html>

You can use color names, HEX values, or RGB values to set the text color. For example:

h1 {
  color: #ff6200;
}

2. Text Alignment

The text-align property is used to control the horizontal alignment of text. The commonly used values are:

  • left
  • right
  • center
  • justify

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Alignment</title>

  <style>
    .left {
      text-align: left;
    }

    .center {
      text-align: center;
    }

    .right {
      text-align: right;
    }
  </style>
</head>

<body>

  <p class="left">This text is aligned to the left.</p>

  <p class="center">This text is aligned to the center.</p>

  <p class="right">This text is aligned to the right.</p>

</body>
</html>

By default, most text is aligned to the left.

You can use:

text-align: justify;

This adjusts the spaces between words so that the text lines appear evenly aligned on both sides.

3. Text Decoration

The text-decoration property is used to add or remove decoration from text. For example:

h1 {
  text-decoration: underline;
}

This adds an underline below the heading.

Some common values are:

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Decoration</title>

  <style>
    .underline {
      text-decoration: underline;
    }

    .overline {
      text-decoration: overline;
    }

    .line {
      text-decoration: line-through;
    }
  </style>
</head>

<body>

  <p class="underline">This text has an underline.</p>

  <p class="overline">This text has an overline.</p>

  <p class="line">This text has a line through it.</p>

</body>
</html>

The value none is commonly used to remove the underline from links.

For example:

a {
  text-decoration: none;
}

4. Text Transformation

The text-transform property is used to change the appearance of letters. The commonly used values are:

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Transform</title>

  <style>
    .upper {
      text-transform: uppercase;
    }

    .lower {
      text-transform: lowercase;
    }

    .capital {
      text-transform: capitalize;
    }
  </style>
</head>

<body>

  <p class="upper">learning css is fun</p>

  <p class="lower">LEARNING CSS IS FUN</p>

  <p class="capital">learning css is fun</p>

</body>
</html>

The text content in HTML stays the same, but CSS changes how it appears on the page.

5. Letter Spacing

The letter-spacing property is used to add or reduce space between letters. For example:

h1 {
  letter-spacing: 5px;
}

This adds extra space between each letter.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Letter Spacing</title>

  <style>
    h1 {
      letter-spacing: 5px;
    }
  </style>
</head>

<body>

  <h1>CSS TEXT</h1>

</body>
</html>

6. Word Spacing

The word-spacing property is used to control the space between words. For example:

p {
  word-spacing: 10px;
}

This adds extra space between the words.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Word Spacing</title>

  <style>
    p {
      word-spacing: 10px;
    }
  </style>
</head>

<body>

  <p>Learning CSS is easy and interesting.</p>

</body>
</html>

7. Line Height

The line-height property controls the vertical space between lines of text. For example:

p {
  line-height: 1.8;
}

A larger value creates more space between lines.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Line Height</title>

  <style>
    p {
      width: 300px;
      line-height: 1.8;
    }
  </style>
</head>

<body>

  <p>
    CSS allows you to control the appearance of text on a web page.
    You can change its color, alignment, spacing, and many other things.
  </p>

</body>
</html>

Changing the line height can make text easier to read, especially when working with longer paragraphs.

Quick Recap

  • The color property changes the text color.
  • text-align controls where the text is placed horizontally.
  • text-decoration adds or removes lines from text.
  • text-transform changes how letters appear.
  • letter-spacing controls the space between letters.
  • word-spacing controls the space between words.
  • line-height controls the space between lines.

Frequently Asked Questions (FAQs)

Q1. What is CSS text styling?

CSS text styling is used to control the appearance of text on a web page. You can change text color, alignment, decoration, spacing, and other text-related properties.

Q2. How do I change text color in CSS?

You can change the color of text using the CSS color property. CSS supports color names, HEX values, RGB values, and other color formats.

Q3. What does text-align do in CSS?

The text-align property controls the horizontal alignment of text. Common alignment options include left, right, center, and justify.

Q4. What is text-decoration in CSS?

The text-decoration property is used to add or remove decorative lines from text, such as an underline, overline, or line through the text.

Q5. What does text-transform do in CSS?

The text-transform property changes how text appears by converting letters to uppercase, lowercase, or capitalized text.

Q6. What is letter-spacing and word-spacing in CSS?

The letter-spacing property controls the space between letters, while the word-spacing property controls the space between words.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top