Tutorialspoint.dev

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:

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

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

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

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



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

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

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

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

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

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter