Skip to content
Related Articles

Related Articles

Improve Article

CSS | Text Formatting

  • Difficulty Level : Hard
  • Last Updated : 30 Jul, 2021

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:  

html




<!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>
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:  



html




<!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>
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:  

html




<!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>
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:  

html




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

html




<!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>
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:  

html




<!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>
OUTPUT:

7.LINE HEIGHT 
This property is used to set the space between the lines. 

Syntax:
body
{
line-height:size;
}

Example:  

html




<!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>
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:  



html




<!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>
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:  

html




<!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>
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:  

html




<!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>
OUTPUT:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :