1)text-indent
2)text-align
3)text-decoration
4)letter-spacing
5)text-transform
1)text-indent:
The property text-indent allows an indent to the first line of the paragraph. A simple example is shown below with indentation and without indentation.
<div style="text-indent:3em">
Here text-indent is set to 3em.
</div>
<div>
This text is without any indentation.
</div>
Here text-indent is set to 3em.
This text is without any indentation.
2)text-align:
Text-align can have value,
-Left :Text will be left justified.
-Right :Text will be right justified.
-Center :Text will be in center.
-justify : Text stretch in the line in such way so that both the right and left margins are straight.
Following is an example:
<div style="text-align:left">
<b>Left:</b> Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:right">
<b>Right: </b>Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:center">
<b>Center: </b>Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:justified">
<b>Justified:</b> Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
Output is,
Left: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
Right: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
Center: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
Justified: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
3)text-decoration
Text-decoration specifies whether there will be line over the text or under the text or through the text or none. It can have following values,
-Underline
-Overline
-Line-through
-None
Following is an example.
<div style="text-decoration:underline">
Line goes under the text.
</div>
<div style="text-decoration:overline">
Line goes over the text.
</div>
<div style="text-decoration:line-through">
Line goes through the text.
</div>
<div style="text-decoration:none">
No Line over/ under /through the text.
</div>
output is,
Line goes under the text.
Line goes over the text.
Line goes through the text.
No Line over/ under /through the text.
4)letter-spacing:
letter-spacing is the width between letter.
Example is,
<div style="letter-spacing:0.1em">
Space between letter is less.
</div>
<div style="letter-spacing:0.5em">
Space between letter is more.
</div>
output is,
Space between letter is less.
Space between letter is more.
5)text-transform:
The text-transform property controls the capitalization of a text.
It can have the following values.
-capitalize: Capitalizes the first letter of each word.
-uppercase: Converts all letters to uppercase.
-lowercase: Converts all letters to lowercase.
-none: No transformations
Following is an example.
<div style="text-transform:capitalize">
<b>Capitalize:</b> My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:uppercase">
<b>Uppercase: </b>My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:lowercase">
<b>Lowercase: </b>My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:none">
<b>None: </b>My name is Mohammad Abdul Momin Arju
</div>
output is,
Capitalize: My name is Mohammad Abdul Momin Arju
Uppercase: My name is Mohammad Abdul Momin Arju
Lowercase: My name is Mohammad Abdul Momin Arju
None: My name is Mohammad Abdul Momin Arju
Related Documents
No comments:
Post a Comment