Property | Description |
---|---|
text-align | Specifies the horizontal alignment of text |
text-color | Sets the color of text |
text-decoration | Specifies the decoration added to text |
direction | Specifies the text direction/writing direction |
letter-spacing | Increases or decreases the space between characters in a text |
line-height | Sets the line height |
text-indent | Specifies the indentation of the first line in a text-block |
text-transform | Controls the capitalization of text |
text-shadow | Specifies the shadow effect added to text |
text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
vertical-align | Sets the vertical alignment of an element |
white-space | Specifies how white-space inside an element is handled |
word-spacing | Increases or decreases the space between words in a text |
<html>
<head>
<title>Text Alignment</title>
</head>
<body>
<style type="text/css">
.text_align{ text-align:center;}
.text_align_2{ text-align:left;}
.text_align_3{ text-align:right;}
.text_align_4{ text-align:justify;}
</style>
<div class="text_align">Text Alignment Center</div>
<div class="text_align_2">Text Alignment Left</div>
<div class="text_align_3">Text Alignment Right</div>
<div class="text_align_4">Text Alignment Justify</div>
</body>
<html>
<html>
<head>
<title>Text Color</title>
</head>
<body>
<style type="text/css">
.text_color{ color:#F60;}
</style>
<div class="text_color">Text Color Orrange</div>
</body>
<html>
<html>
<head>
<title>Text Decoration</title>
</head>
<body>
<style type="text/css">
.text_decoration{ text-decoration:line-through;}
.text_decoration_2{ text-decoration:none;}
.text_decoration_3{ text-decoration:overline;}
.text_decoration_4{ text-decoration:underline;}
</style>
<div class="text_decoration">Text Decoration Line-Through</div>
<div class="text_decoration_2">Text Decoration none</div>
<div class="text_decoration_3">Text Decoration Overline</div>
<div class="text_decoration_4">Text Decoration Underline</div>
</body>
<html>
<html>
<head>
<title>Text Direction</title>
</head>
<body>
<style type="text/css">
.text_direction{ direction:ltr;}
.text_direction_2{ direction:rtl;}
</style>
<div class="text_direction">Text Direction LTR</div>
<div class="text_direction_2">Text Direction RTL</div>
</body>
<html>
<html>
<head>
<title>Letter Spacing</title>
</head>
<body>
<style type="text/css">
.letter_spacing{ letter-spacing:5px;}
.letter_spacing_2{ letter-spacing:normal;}
.letter_spacing_3{ letter-spacing:-1px;}
</style>
<div class="letter_spacing">Sample Text : Letter Sapcing</div>
<div class="letter_spacing_2">Sample Text : Letter Sapcing</div>
<div class="letter_spacing_3">Sample Text : Letter Sapcing</div>
</body>
<html>
<html>
<head>
<title>Line Height</title>
</head>
<body>
<style type="text/css">
.lign_height{ line-height:26px;}
.lign_height_2{ line-height:normal;}
</style>
<div class="lign_height">Sample Line Height</div>
<div class="lign_height_2">Sample Line Height</div>
</body>
<html>
<html>
<head>
<title>Text Indent</title>
</head>
<body>
<style type="text/css">
.text_indent{ text-indent:hanging;}
.text_indent_2{ text-indent:45px;}
</style>
<div class="text_indent">Text Indentation</div>
<div class="text_indent_2">Text Indentation</div>
</body>
<html>
<html>
<head>
<title>Text Transform</title>
</head>
<body>
<style type="text/css">
.text_transform{ text-transform:capitalize;}
.text_transform_2{ text-transform:lowercase;}
.text_transform_3{ text-transform:none;}
.text_transform_4{ text-transform:uppercase;}
</style>
<div class="text_transform">text transform capitalize</div>
<div class="text_transform_2">Text Transform Lowercase</div>
<div class="text_transform_3">text transform None</div>
<div class="text_transform_4">Text Transform Uppercase</div>
</body>
<html>
<html>
<head>
<title>Text Shadow</title>
</head>
<body>
<style type="text/css">
.text_shadow{ text-shadow: 3px 2px red;}
</style>
<div class="text_shadow">This Is Sample Text</div>
</body>
<html>
<html>
<head>
<title>Word Spacing</title>
</head>
<body>
<style>
.word_spacing{word-spacing: 10px;}
.word_spacing_2{ word-spacing: -5px;}
</style>
<div class="word_spacing">This is Sample Text</div>
<div class="word_spacing_2">This is Sample Text</div>
</body>
</html>