CSS Text

With CSS, you can also design web page text. For this, CSS provides you many properties.

Fonts represent the shape, such as the size of different font families, differently. With different shapes that you draw the character, they are called text (a, b, c, d @, # etc).

Text Color

This property is used to set the text color. You can apply it to different HTML elements. If you apply it to the body tag then the value you give to this property becomes all the text of the color webpage.

As the value of this property, you can give the color name or its hex value. An example of this is being given below.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: #95E514;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>

</body>
</html>

Output

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

Text Alignment

Through this property, you set the alignment of text in the webpage. None of the 4 given below of this property can define a value.

  1. left – This value goes align to the text left side.
  2. right – By this value the text goes align to the right side.
  3. justify – With this value you can align the text like a book.
  4. center – It aligns text in the center.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

Output

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

Text Decoration

You can decorate text by this property. Like define the underline of the text etc. You can set any value of this property from below given 4 values.

  1. none – There is no decoration on this text from this value.
  2. underline – By setting this value, the line appears below the text.
  3. overline – If you apply this value, the line above the text is displayed.
  4. line-through – When using this value, the line is pulled from the middle to the cutting of text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.aa {
  text-decoration: none;
}

.bb {
  text-decoration: overline;
}

.cc {
  text-decoration: line-through;
}

.dd {
  text-decoration: underline;
}
</style>
</head>
<body>

<h3 class="aa">This is heading 3</h3>
<h3 class="bb">This is heading 3</h3>
<h3 class="cc">This is heading 3</h3>
<h3 class="dd">This is heading 3</h3>

</body>
</html>

Output

This is heading 3

This is heading 3

This is heading 3

This is heading 3

Text Transformation

You can set the case of text by this property. Whether you want to show text in upper case or show in lower case. You can set any value of this property from below given 4 values.

  1. none
  2. uppercase
  3. lowercase
  4. capitalize

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

Output

This is some text.

This is some text.

This is some text.

Text Indentation

By this property you can set the indent of the first line of paragraph. In the first line of the Indent paragraph, there is an extra space which shows that line different from the second line. The value of this property can be given in length or in percent. An example of this is being given below.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.text-idn {
  text-indent: 50px;
}
</style>
</head>
<body>

<p class="text-idn">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Output

Fonts represent the shape, such as the size of different font families, differently. With different shapes that you draw the character, they are called text (a, b, c, d @, # etc).

Text Direction

Through this property you set the direction of text. That is, from which side do you want to start writing text? It can be left and right to another and can be left to right and left. From the given values, you can set any value to this property.

  1. ltr – With this value you set the direction of text from left to right.
  2. rtl – Through this property, you set the direction of text from right to left.
  3. initial – Through this property you can set the default direction of text.
  4. inherit – When you set this value, the direction of text is the same as the parent element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

</body>
</html>

Output

This is the default text direction.

This is right-to-left text direction.

Letter Spacing

The letter-spacing property is employed to specify the area between the characters during a text.

Example

.para1 {
  letter-spacing: 4px;
}

.para2 {
  letter-spacing: -4px;
}

Output

This is paragraph 1

This is paragraph 2