Formatting Using Style Sheet
Text-align property in css
The text-align property allows the text to be left,right,center or justify .
| Property | Description |
|---|---|
| LEFT | It is used for aligning the text to the LEFT of the web page |
| RIGHT | It is used for aligning the text to the RIGHT of the web page |
| CENTER | It is used for aligning the text to the CENTER of the web page |
| JUSTIFY | IT is used for Justifying the Text from both sides. |
<html>
<head>
<title>CSS</title>
<style>
.left
{
text-align:left
}
.right
{
text-align:right
}
.center
{
text-align:center
}
.h
{
text-align:justify
}
</style>
</head>
<body>
<div class="left">this is left alignment</div>
<div class="right">this is right alignment</div>
<div class="center">this is center alignment</div>
<div class="h">Welcome to the mktutorial.in This site is developed so that students may learn computer science related technologies easily. mktutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </div>
</body>
</html>
output
this is left alignment
this is right alignment
this is center alignment
Welcome to the mktutorial.in This site is developed so that students may learn computer science related technologies easily. mktutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
Text Decoration property in css
Text Decoration Property decorates the content of the text. It adds lines under, above, and through the text.
| Value | Description |
|---|---|
| none | It is used for displaying normal Text without any formatting |
| Underline | It is used for displaying line under the TEXT |
| Overline | It is used for displaying line over the TEXT |
| line-through | It is used for displaying line through the TEXT |
<html>
<head>
<title>CSS</title>
<style>
.a1
{
text-decoration:underline
}
.a2
{
text-decoration:overline
}
.a3
{
text-decoration:line-through
}
.a4
{
text-decoration:none
}
</style>
</head>
<body>
<div class="a1">this is a demo example of text-decoration property</div>
<div class="a2">this is a demo example of text-decoration property</div>
<div class="a3">this is a demo example of text-decoration property</div>
<div class="41">this is a demo example of text-decoration property</div>
</body>
</html>
output
this is a demo example of text-decoration property
"this is a demo example of text-decoration property
this is a demo example of text-decoration property
this is a demo example of text-decoration property
Text Transform property in css
Text Transform Property is for changing the case of letters in a text.
| Value | Description |
|---|---|
| none | It is used in specifying that the text will be displayed with the same casing as written with in the element |
| captilize | It is used in specifying that the first letter of each word will be capitalized. |
| uppercase | It is used in specifying only uppercase letters. |
| lowercase | It is used in specifying only uppercase letters. |
<html>
<head>
<title>CSS</title>
<style>
.k1
{
text-transform:none;
}
.k2
{
text-transform:capitalize
}
.k3
{
text-transform:uppercase
}
.k4
{
text-transform:lowercase
}
</style>
</head>
<body>
<div class="k1">this is a demo example of text-transform property</div>
<div class="k2">this is a demo example of text-transform property</div>
<div class="k3">this is a demo example of text-transform property</div>
<div class="k1">this is a demo example of text-transform property</div>
</body>
</html>
output
this is a demo example of text-transform property
this is a demo example of text-transform property
this is a demo example of text-transform property
this is a demo example of text-transform property
word-spacing property in css
this CSS property is used to control the space between the words. Using this property, we can increase or decrease the space between the words.
<html>
<head>
<title>CSS</title>
<style>
.d1
{
word-spacing:10px
}
.d2
{
word-spacing:20px
}
.d3
{
word-spacing:30px
}
.d4
{
word-spacing:40px
}
</style>
</head>
<body>
<div class="d1">Welcome to mktutorial</div>
<div class="d2">Welcome to mktutorial</div>
<div class="d3">Welcome to mktutorial</div>
<div class="d4">Welcome to mktutorial</div>
</body>
</html>
output
Welcome to mktutorial
Welcome to mktutorial
Welcome to mktutorial
Welcome to mktutorial
Text-indent property in css
The text-align property is used for specifying fixed indentation and the default value is 0 .
<html>
<head>
<title>CSS</title>
<style>
.a1
{
text-indent:50px;
}
</style>
</head>
<body>
<div class="a1">this is a demo example of text-indent property</div>
</body>
</html>
output
this is a demo example of text-indent property