Css Text Formatting

CSS Text Formatting
Dr.G.Jasmine Beulah
Assistant Professor, Kristu Jayanti
College, Bengaluru

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; }

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

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; }

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

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; }

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

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; }

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-transform:lowercase;
}
</style>
</head>
<body>
<h1>
Internet Technology
</h1>
<h2>
Learning CSS
</h2>
</body>
</html>

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; }

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

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; }

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

7.LINE HEIGHT
This property is used to set the space between the lines.
Syntax: body { line-height:size; }

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

Css Text Formatting

More Related Content

What's hot (20)

Similar to Css Text Formatting (20)

More from Dr. Jasmine Beulah Gnanadurai (20)

Recently uploaded (20)

Css Text Formatting