CSS | Text Formatting

02 Jun, 2022
CSS text formatting properties is used to format text and style text.CSS text formatting include following properties:1.Text-color2.Text-alignment3.Text-decoration4.Text-transformation5.Text-indentation6.Letter spacing7.Line height8.Text-direction9.Text-shadow10.Word spacing
1.TEXT COLORText-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 ALIGNMENTText 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 DECORATIONText 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 TRANSFORMATIONText transformation property is used to change the case of text, uppercase or lowercase.Text transformation can be uppercase, lowercase or capitalise.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 INDENTATIONText 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 SPACINGThis 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 HEIGHTThis 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 DIRECTIONText 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 SHADOWText 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 SPACINGWord 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:


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.
ysachin2314
rkbhola5
CSS-Basics
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Node.js fs.readFileSync() Method
How to set input type date in dd-mm-yyyy format using HTML ?