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:

• Using color names like red, blue, green, etc.
• Using hexadecimal value like #ff0000, #0000ff, #00ff00, etc.
• Using RGB value like rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 255, 0), etc.
• Using HSL value like hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%), etc.

h2 {
  color: red;
}

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

h4 {
  color: #03fc1c;
}

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

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.

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

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:

• horizontal offset - It is the distance between the shadow and the text in the horizontal direction.
• vertical offset - It is the distance between the shadow and the text in the vertical direction.
• blur radius - It is the blur radius of the shadow.
• color - It is the color of the shadow.

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

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.

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

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.

.indent {
  text-indent: 50px;
}

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.

.decoration {
  text-decoration: underline;
}

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.

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

8. CSS Word spacing

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

.spacing {
  word-spacing: 10px;
}

9. CSS Letter spacing

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

.spacing {
  letter-spacing: 10px;
}

10. CSS White space

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

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