CSS Text Style


CSS provides us the ability to style the text using its text formatting properties. These properties are used to change the appearance of the text.

Some of its text formatting properties are:

  1. Text color
  2. Text align
  3. Text shadow
  4. Text direction
  5. Text indent
  6. Text decoration
  7. Text transform
  8. Word spacing
  9. Letter spacing
  10. White space

1. CSS Text Color

Using color property in CSS you can set the color of the text of any HTML element.

Color values can be specified in the following ways:

CSS text-color example
Change the values from options to see the effect.

Example

h2 {
  color: red;
}

h3 {
  color: rgb(252, 186, 3);
}

h4 {
  color: #03fc1c;
}

p {
  color: hsl(220, 50%, 60%);
}
Try it

2. CSS Text align

Using the text-align property in CSS you can align the text of any HTML element in the horizontal direction.

The value of text-align can be set to left, right, center, justify, or initial.

CSS text-align example
Change the values from options to see the effect.

Example

.left { text-align:left; }
.left { text-align: right; }
.left { text-align: justify; }
Try it

3. CSS Text shadow

The text-shadow property is used to create a shadow effect on the texts.

The value of text-shadow has 4 parts of value. They are:

CSS text-shadow example
Change the values from options to see the effect.

Example

.shadow {
  text-shadow: 2px 2px 1px red;
}
Try it

4. CSS Text direction

direction property is used to set the direction of the text.

The value of direction can be set to ltr or rtl.

CSS direction example

Change the values from options to see the effect.

Example

.ltr {
  direction: ltr;
}
.rtl {
  direction: rtl;
}
Try it

5. CSS Text indent

text-indent property is used to set the indentation of first line of any paragraph.

The value of text-indent can be set to any length value.

CSS text-indent example
Change the values from options to see the effect.

Example

.indent {
  text-indent: 50px;
}
Try it

6. CSS Text decoration

text-decoration property is used to decorate text by creating underline, overline, line-through, or none.

It is used to remove the underline from any link.

CSS text-decoration example
Change the values from options to see the effect.

Example

.decoration {
  text-decoration: underline;
}
Try it

7. CSS Text transform

The text-transform property is used to transform the text either in uppercase or in lowercase.

Using this property one can convert uppercase into lowercase and lowercase into uppercase also the first letter of the word can be capitalized.

CSS text-transform example
Change the values from options to see the effect.

Example

.transform-1 {
  text-transform: uppercase;
}
Try it

8. CSS Word spacing

The word-spacing property is used to increase or decrease the space between words.

CSS word-spacing example
Change the values from options to see the effect.

Example

.spacing {
  word-spacing: 10px;
}
Try it

9. CSS Letter spacing

The letter-spacing property is used to increase or decrease the space between letters.

CSS letter-spacing example
Change the values from options to see the effect.

Example

.spacing {
  letter-spacing: 10px;
}
Try it

10. CSS White space

The white-space property is used to control the white space in the text.

CSS white-space example
Change the values from options to see the effect.

Example

.nowrap {
    white-space:nowrap;
}
.wrap {
    white-space:wrap;
}
.pre {
    white-space:pre;
}
Try it