Introduction to CSS Text Formatting

In previous days, you were constrained to represent the text by using the old version of CSS. You had <font>

tag to change the shading and typeface of the content. however, measuring was obstructed by utilising the pre-characterized

text dimensions. The various impacts like intensity and strike-through were conceivable in just fundamental structures with

the help of HTML labels. Presently, the user can use a variety of CSS text formatting properties to arrange the text on the

web pages in his ways.

CSS text-indent Property

The text-indent property specifies the indentation of the first line in a text-block.

Negative values are allowed. The first line will be indented to the left if the value is negative.

Example

Indent the first line of text with different values:

div.a {
    text-indent: 50px;
}

div.b {
    text.indent: -2em;
}

div.c {
    text-indent: 30%;
}

CSS text-align Property

The text-indent property specifies the indentation of the first line in a text-block.

Negative values are allowed. The first line will be indented to the left if the value is negative.

Example

Set the text alignment for different <div> elements:

div.a {
   text-align: center;
}

div.b {
    text-align:left;
}

div.c {
    text-align:right;
}

div.c {
  text-align: justify;
}

CSS text-decoration Property

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

• text-decoration-line (required)
• text-decoration-color
• text-decoration-style
• text-decoration-thickness

Example

Set different text decorations for <h1>,<h2>, and <h3> elements:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoraion: line-through;
}

h3 {
   text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}

CSS text-shadow Property

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

Example

Basic text-shadow;

h1 {
   text-shadow: 2px 2px #ff000;
}

CSS letter-spacing Property

The letter-spacing property increases or decreases the space between characters in a text.

Example

Set the letter spacing for <h1>,<h2> and <h3> elements:

h1 {
   letter-spacing: 3px;
}

h2 {
   letter-spacing: 2px;
}

h3 {
   letter-spacing: -1px;
}

CSS word-spacing Property

The word-spacing property increases or decreases the white space between words.

Negative values are allowed.

Example

Specify that the space between words in <p> elements should be 30 pixels:

p {
  word-spacing: 30px;
}

CSS text-transform Property

The text-transform property controls the capitalization of text.

Example

Transform text in different <div> elements:

div.a {
   text-transform: uppercase;
}

div.b {
    text-transform: lowercase;
}

div.c {
   text-transform: capitalize;
}

CSS white-space Property

The white-space property specifies how white-space inside an element is handled.

Example

Demonstrate different values of the white-space property:

p.a {
  white-space: nowrap;
}

p.b {
   white-space: normal;
}

p.c {
   white-space: pre;
}

CSS line-height Property

The line-height property specifies the height of a line.

Negative values are not allowed.

Example

Set the line height for different<div> elements:

div.a {
   line-height:normal;
}

div.b {
   line-height: 1.6;
}

div.c {
   line-height: 80%;
}

div.d {
   line-height:200%;
}