CSS Text

There are some property of CSS which are directly control the text. Text are broadly used in HTML as paragraph, heading etc. So for designing a webpage properly it is necessary to give a proper style to the text.

Here are the property of text in CSS:

Text Property Description
color Specifies the color of text.
direction Specifies the direction of text.
letter-spacing Defines spaces space between the letters in a word.
word-spacing Defines spaces between the word in a sentence.
text-align Specifies the alignment of the text in a document.
text-decoration Used to give or remove decoration style from a text.
text-transform Used to control the capitalization of the text.
text-indent Used to control the indentation of the first line of a paragraph or text.
text-shadow Used to give a shadow around the text.
line-height Used to control the height of a line.
white-space Used to control the white space inside an element.


The color Property

It is used to set a color for the text.

Example:

p {
  color: red;
}

Run Example

The direction Property

It is used to set direction for the text.

Example:

p {
  direction: rtl;
}

Run Example

The letter-spacing Property

It is used to define spaces between the letters in a word.

Example:

p {
  letter-spacing: 2px;
}

Run Example

The word-spacing Property

It is used to define spaces between the words in a sentence.

Example:

p {
  word-spacing: 3px;
}

Run Example

The text-align Property

It is used to specify the alignment of text.

Example:

p {
  text-align: center;
}

Run Example

The text-decoration Property

It is used to give or remove decoration style from a text.

Example:

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: none;
}

Run Example

The text-transform Property

It is used to control the capitalization of the text.

Example:

p {
  text-transform: uppercase;
}

Run Example

The text-indent Property

It is used to control the indentation of the first line of a paragraph or text.

Example:

p {
  text-indent: 20px;
}

Run Example

The text-shadow Property

It is used to give a shadow around the text.

Example:

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

Run Example

The line-height Property

It is used to control the height of a line.

Example:

p {
  line-height: 1.5;
}

Run Example

The white-space Property

It is used to control the white space inside an element.

Example:

p {
  white-space: pre;
}

Run Example