CSS | Text Formatting

CSS text formatting properties is used to format text and style text.
CSS text formatting include following properties:
1.Text-color
2.Text-alignment
3.Text-decoration
4.Text-transformation
5.Text-indentation
6.Letter spacing
7.Line height
8.Text-direction
9.Text-shadow
10.Word spacing


1.TEXT COLOR

Text-color property is used to set the color of the text.

Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).

Syntax:
body
{
color:color name;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
}
h2
{
color:green;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

chevron_right



OUTPUT:


2.TEXT ALIGNMENT

Text alignment property is used to set the horizontal alignment of the text.

The text can be set to left, right, centered and justified alignment.

In justified alignment, line is stretched such that left and right margins are straight.



Syntax:
body
{
text-align:alignment type;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
text-align:center;
}
h2
{
color:green;
text-align:left;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

chevron_right



OUTPUT:


3.TEXT DECORATION

Text decoration is used to add or remove decorations from the text.

Text decoration can be underline, overline, line-through or none.

Syntax:
body
{
text-decoration:decoration type;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

chevron_right



OUTPUT:


4.TEXT TRANSFORMATION

Text transformation property is used to change the case of text, uppercase or lowercase.

Text transformation can be uppercase, lowercase or captitalise .

Capitalise is used to change the first letter of each word to uppercase.

Syntax:
body
{
text-transform:type;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-transform:lowercase;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

chevron_right



OUTPUT:


5.TEXT INDENTATION

Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.

Syntax:
body
{
text-indent:size;
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-indent:80px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.<br>
Text indentation property is used to indent the first line of the paragraph.
</h2>
</body>
</html>

chevron_right



OUTPUT:


6.LETTER SPACING

This property is used to specify the space between the characters of the text.
The size can be given in px.

Syntax:
body
{
letter-spacing:size;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
letter-spacing:4px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>

chevron_right



OUTPUT:


7.LINE HEIGHT

This property is used to set the space between the lines.

Syntax:
body
{
line-height:size;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
line-height:40px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.<br>
This property is used to set the space between the lines.
</h2>
</body>
</html>

chevron_right



OUTPUT:


8.TEXT DIRECTION

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

The direction can be set by using rtl : right to left .

Left to right is the default direction of the text.

Syntax:
body
{
direction:rtl;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
direction: rtl;
text-align:center;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2><bdo dir="rtl">
This is text formatting properties.
</bdo>
</h2>
</body>
</html>

chevron_right



OUTPUT:




9.TEXT SHADOW

Text shadow property is used to add shadow to the text.
You can specify the horizontal size, vertical size and shadow color for the text.

Syntax:
body
{
text-shadow:horizontal size vertical size color name;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow:3px 1px blue;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>

chevron_right



OUTPUT:


10.WORD SPACING

Word spacing is used to specify the space between the words of the line.
The size can be given in px.

Syntax:
body
{
word-spacing:size;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
word-spacing:15px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>

chevron_right



OUTPUT:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.