CSS Text

In this tutorial, we will learn various text properties which can help us change the visual appearance, alignment, spacing, decoration, transformation, and much more of the CSS text.

The most commonly used text properties are: color, text-align, text-decoration, text-transformation, text-indent, letter-spacing, word-spacing, etc. These properties give an easy, effective, and precise control over the visual appearance of the text.

Let’s see how to use each of these properties over the selected text in more detail:

CSS Text Color

CSS color property is used to set the color of the text.

The color value can be specified in any of the below color formats:

  • a color name – like ‘red’, ‘green’, ‘yellow’, etc.
  • a HEX value – like ‘#f1f1f1’
  • RGB format – like rgb(123,255,0)
  • HSL format – like hsl(123, 100%, 50%)

Example:

h1{
  color: red;
}
h2{
  color: blue;
}
p{
  color: #325cd1;
}

CSS Text Alignment

CSS text-align property is used to align texts horizontally. The text can be aligned to the left, right, or center of the element based on our requirements. Try out the below example to see how it works:

Example:

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

CSS Text Decoration

CSS text-decoration property is used to add or remove decorations from the text.

This property is mostly used with CSS links to add an underline so that the visitor can understand whether the text is a link or just a normal text. We recommend you to avoid underline a text that is not a link as it might confuse the visitor.

The text-decoration property can accept any of the following values:

  • underline
  • overline
  • line-through
  • none

Example:

h1{
  text-decoration: underline;
}
h2{
  text-decoration: overline;
}
h3{
  text-decoration: line-through;
}

The text-decoration: none; is mostly used to remove an existing underline if any. For example, removing an underline from a visited link. Try out the below example to see the implementation:

Example:

a{
   text-decoration: none;
}

CSS Text Transformation

CSS text-transform property is used to transform the text to upper, lower, or capitalize case.

The text-transform property accepts the below three values:

  • uppercase – Sets each letter of the text to uppercase
  • lowercase – Sets each letter of the text to lowercase
  • capitalize – Sets the first letter of each word to uppercase

Example:

.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}

CSS Text Indentation

CSS text-indent property is used to set an indentation for the very first line of the text. Here, indentation simply means adding an empty space at the beginning of the very first line of the paragraph while keeping other lines unaffected.

The indentation can be specified in ‘px’, ’em’, ‘rem’, ‘cm’, etc.

Try out the below example to see the implementation:

Example:

.p1{
  text-indent: 50px;
}
.p2{
  text-indent: 100px;
}
.p3{
  text-indent: 5em;
}

CSS Text Shadow

CSS text-shadow property is used to add a shadow to the text.

The text-shadow property needs at least two parameters to define the text-shadow in its simplest form. The first parameter specifies the horizontal shadow and the second parameter specifies the vertical shadow.

In the example below, the h1 element has a horizontal shadow of 1px and a vertical shadow of 2px.

Example:

h1{
  text-shadow: 1px 2px;
}

We can also specify the color of the text shadow as a third parameter. By default, the color of the shadow is same as the color of the text, as we saw in the previous example.

The shadow color can be specified in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. Try out the example below:

Example:

h1{
  text-shadow: 1px 2px blue;
}

To make the text shadow more attractive, we can also add the blur effect to it. The blur effect(generally called the blur radius) can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ’em’, etc. See the example below:

Example:

h1{
  text-shadow: 1px 2px 5px blue;
}

CSS Letter Spacing

CSS letter-spacing property is used to set an extra spacing between the characters of a text.

The letter-spacing property can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. See the example below:

Example:

.p1{
     letter-spacing: 5px;
}

The letter-spacing property can also accept a negative value. When we set the letter-spacing property to a negative value, the letters of the text start overlapping each other. Try out the example below;

Example:

.p1{
  letter-spacing: -1px;
}
.p2{
  letter-spacing: -2px;
}

Note: We recommend you to specify the letter-spacing in em unit as specifying it in px may cause unexpected results.


CSS Word Spacing

CSS word-spacing property is used to set an additional space between the words of a text. The word-spacing property can accept a negative or positive value.

Setting the word-spacing to a negative value results in overlapping the text as we saw in the previous example.

The word-spacing property can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Try out the example below:

Example:

.p1{
  word-spacing: 10px;
}
.p2{
  word-spacing: 20px;
}

Line Height

CSS line-height property is used to set the height of a line of the text.

The line-height can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, etc. It can also accept a percentage(%) value. Try out the example below:

Example:

.p1{
  line-height: 10px;
}    
.p2{
  line-height: 20px;
}
.p3{
  line-height: 30px;
}

All Text Properties

PropertyDescription
colorSets the color of the text.
text-alignAligns text horizontally.
text-align-lastAligns the last line of the text.
text-decorationA shorthand property to set the text decoration.
text-decoration-colorSets the color of the decoration line.
text-decoration-lineSets the type of decoration line such as underline, overline, line-through, etc.
text-decoration-styleSets the style of the decoration line such as ‘solid’, ‘dashed’, ‘dotted’, ‘wavy’, etc.
text-indentSpecifies the indentation for the first line of text.
text-overflowSpecifies how the overflowed text should be signaled to the user.
text-shadowAdds a shadow to the text.
text-transformTransform the text to upper, lower, or capital case.
letter-spacingSets a space between the characters of a text.
word-spacingSets a space between the words of a text.
line-heightsets the height of a line of text.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.