CSS Text

By /

In this CSS Text 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. CSS 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.

Mini Quiz

0%

CSS - QUIZ 11

1 / 5

Q1. Which property changes the horizontal alignment of text?

2 / 5

Q2. Which value removes an underline from a link?

3 / 5

Q3. Which property controls the space between letters?

4 / 5

Q4. What does text-transform: uppercase; do?

5 / 5

Q5. Which property controls the space between lines of text?

Your score is

The average score is 80%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Movie Review Highlight

Question:

Create a simple Movie Review Highlight section for a movie you like. Use CSS text properties to make the movie title, review, and important details visually different.

Requirements

  • Add the movie name as the main heading.
  • Change the heading’s text color and center-align it.
  • Use text-transform to change the appearance of the movie title.
  • Add a text decoration to a short tagline using text-decoration.
  • Use letter-spacing on the movie title to create a different heading style.
  • Use word-spacing in the tagline.
  • Write a short movie review and use line-height to improve the spacing between its lines.
  • Use different text alignment values where suitable, such as center, left, or justify.
View Answer Code
<!DOCTYPE html>
<html>
<head>
  <title>Movie Review Highlight</title>

  <style>
    h1 {
      color: #0b4e9a;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 5px;
    }

    h2 {
      text-align: center;
      text-decoration: underline;
      word-spacing: 10px;
    }

    p {
      text-align: justify;
      line-height: 1.8;
    }

    .rating {
      text-align: center;
      text-transform: capitalize;
      letter-spacing: 2px;
    }
  </style>
</head>

<body>

  <h1>Interstellar</h1>

  <h2>A Journey Beyond The Stars</h2>

  <p>
    Interstellar is a science-fiction movie that explores space,
    time, family, and human survival. The story follows a group
    of astronauts who travel through space to find a new home
    for humanity.
  </p>

  <p class="rating">Worth watching for every movie lover</p>

</body>
</html>

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