Google News
logo
CSS - Text
CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively. CSS has several properties for defining the styles of text. 

CSS Text Properties

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
Text Alignment
<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>
Output :
Text Alignment Center
Text Alignment Left
Text Alignment Right
Text Alignment Justify
Text Color
<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>
Output :
Text Color Orrange
Text Decoration
<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>
Output :
Text Decoration Line-Through
Text Decoration none
Text Decoration Overline
Text Decoration Underline
Text Direction
<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>
Output :
Text Direction LTR
Text Direction RTL
Letter Spacing
<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>
Output :
Sample Text : Letter Sapcing
Sample Text : Letter Sapcing
Sample Text : Letter Sapcing
Line Height
<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>
Output :
Sample Line Height
Sample Line Height
Text Indentation
<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>
Output :
Text Indentation
Text Indentation
Text Transform
<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>
Output :
text transform capitalize
Text Transform Lowercase
text transform None
Text Transform Uppercase
Text Shadow
<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>
Output :
This Is Sample Text
Word Spacing
<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>
Output :
This is Sample Text
This is Sample Text