Text

CSS allows to set various properties for text such as characters, spaces, words and paragraph.

Text Indentation

The text-indent property is used to control the indentation of the first line of a block of text.

The possible values are.

ValuesDescription
<length> (e.g. 2px, -1in, 1.2cm)
<percentage>(e.g. 10%, -20%)
inheritThe property is inherited from the parent
snippet
<html> 
<head> 
    <style> 
        p {text-indent:50px;} 
        div {text-indent:-10%} 
        td {text-indent:3cm} 
    </style> 
</head> 
<body> 
    <p>This is a paragraph text</p> 
    <div>This is a text inside div</div> 
    <table> 
        <tr><th>Lorem Ipsum</th></tr> 
        <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> 
        <tr><td>illo obcaecati dolore id perspiciatis</td></tr> 
        <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> 
    </table> 
</body> 
</html>
Output

This is a paragraph text

This is a text inside div
Lorem Ipsum
optio neque cum aperiam adipisci minus atque corrupti
illo obcaecati dolore id perspiciatis
illum iusto perferendis ipsam harum ab libero
Text Alignment

The text-align property is used to to control the alignment of a block of text.

The values of text-align are.

ValuesDescription
left | right | center | justify
<string>It is used for vertical alignment. Applies for table cells.
inheritinherited from parent
Note
Browser do not yet support the <string> alignment.
snippet
<html> 
<head> 
    <style> 
        p {text-align:justify;} 
        div {text-align:right} 
        td {text-align:"."} 
    </style> 
</head> 
<body> 
    <p>This is a paragraph text</p> 
    <div>This is a text inside div</div> 
    <table> 
        <tr><th>Lorem Ipsum</th></tr> 
        <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> 
        <tr><td>illo obcaecati dolore id perspiciatis</td></tr> 
        <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> 
    </table> 
</body> 
</html>
Output

This is a paragraph text

This is a text inside div
Lorem Ipsum
optio neque cum aperiam adipisci minus atque corrupti
illo obcaecati dolore id perspiciatis
illum iusto perferendis ipsam harum ab libero
Text Decoration

The text-decoration property is used to control the decoration (underline, line-through, etc) of a block of text.

The values of text-decoration are.

ValuesDesciption
none | underline | overline | line-through | blink
inheritinherited from the parent
Note
Internet explorer does not support "blink" value.
snippet
<html> 
<head> 
    <style> 
        p {text-decoration:overline;} 
        span {text-decoration:underline} 
        a {text-decoration:none} 
        b {text-decoration:line-through} 
        em {text-decoration:blink} 
    </style> 
</head> 
<body> 
    <p>Quote</p> 
    <b>Never cry</b> for the person who hurts you. <span>Just smile and say</span>, thanks for giving me a chance to find someone <em>better</em> than you. 
    <div><a href="http://www.quotefellas.com">Quote Fellas</a></div> 
</body> 
</html>
Output

Quote

Never cry for the person who hurts you. Just smile and say, thanks for giving me a chance to find someone better than you.
Text Shadows

The text-shadow property is used to attach shadows to a block of text.

The values of text-shadow are.

ValuesDescription
none
inherit
A list of comma-delimated shadow descriptions
<color><length_x><length_y><length_r><length_x><length_y> - The position of shadow relative to the block. <length_r> - Blur radius. <color> - The color of the shadow.
<length_x><length_y><length_r><color>
example
text-shadow : red 10px 10px; /* Right-bottom*/ 
text-shadow : 10px 10px 5px yellow; /* left-up, blurred*/ 
font-shadow : 5px 5px, -5px -5px;  /* right-bottom and left-up*/
snippet
<html> 
<head> 
    <style> 
        p {text-shadow:-10px -10px 6px red;} 
        h2 {text-shadow:yellow 8px 8px} 
        a {text-shadow:5px 5px, -5px -5px} 
    </style> 
</head> 
<body> 
    <a>This is a anchor link</a> 
    <p>This is a paragraph text</p> 
    <h2>This is a text inside h2</h2> 
</body> 
</html>
Output
This is a anchor link

This is a paragraph text

This is a text inside h2

Letter Spacing

The letter-spacing property is used to add extra space between adjacent characters.

The values of letter-spacing are.

ValuesDescription
normal
<length>
inheritinherited from the parent
example
 letter-spacing : 0.5em 
 letter-spacing : 5px 
 letter-spacing : 5pt 
 letter-spacing : 0.5cm
snippet
<html> 
<head> 
    <style> 
        p {letter-spacing:15px;} 
        h2 {letter-spacing:0.6cm} 
        a {letter-spacing:2mm} 
        span {letter-spacing:3pt} 
        div {letter-spacing:+0.2em; color: red} 
    </style> 
</head> 
<body> 
    <a>This is a anchor link</a> 
    <p>This is a paragraph text</p> 
    <h2>This is a text inside h2</h2> 
    <span>This is a paragraph text</span> 
    <div>This is a text inside h2</div> 
</body> 
</html>
Output
This is a anchor link

This is a paragraph text

This is a text inside h2

This is a paragraph text
This is a text inside h2
Word Spacing

The word-spacing property is used to add extra space between adjacent words.

The values of word-spacing are.

ValuesDescription
normal
<length>
inheritinherited from the parent
example
word-spacing : -0.2ex 
word-spacing : 5cm
snippet
<html> 
<head> 
    <style> 
        p {word-spacing:15px;} 
        h2 {word-spacing:0.6cm} 
        a {word-spacing:2mm} 
        span {word-spacing:3pt} 
        div {word-spacing:+0.2em; color: red} 
    </style> 
</head> 
<body> 
    <a>This is a anchor link</a> 
    <p>This is a paragraph text</p> 
    <h2>This is a text inside h2</h2> 
    <span>This is a paragraph text</span> 
    <div>This is a text inside h2</div> 
</body> 
</html>
Output
This is a anchor link

This is a paragraph text

This is a text inside h2

This is a paragraph text
This is a text inside h2
Text Transform

The text-transform property is used to control the capitalization of a block of text..

The values of text-transform are.

ValuesDescription
none
capitalizeTo capitalize the first character of each word.
uppercaseTo capitalize all characters.
lowercaseTo decapitalize all characters.
inheritThe property is inherited from the parent.
example
 text-transform : uppercase 
 text-transform : lowercase
snippet
<html> 
<head> 
    <style> 
        p {text-transform:uppercase;} 
        span {text-transform:lowercase} 
        div {text-transform:capitalize} 
    </style> 
</head> 
<body> 
    <p>Sometimes you will never know the value of a Moment until it becomes a memory.</p> 
    <span>Sometimes you will never know the value of a Moment until it becomes a memory.</span> 
    <div>Sometimes you will never know the value of a Moment until it becomes a memory.</div> 
</body> 
</html>
White Spaces

The white-space property is used to control the white spaces inside a block of text.

The values of white-space are.

ValuesDescription
normal
capitalizeReplaces the sequence of white spaces with a space character.
preWhite spaces are considered.
nowrapLine breaks are not considered.
inherit The property is inherited from the parent.
example
<style> 
     white-space : nowrap 
     white-space : pre 
</style>
snippet
<html> 
<head> 
    <style> 
        p {white-space:nowrap;} 
        div {white-space:pre} 
    </style> 
</head> 
<body> 
    <p>Sometimes you will never know the value of a Moment until it becomes a memory.</p> 
    <div> 
        	        Name			Age			Grade 
			Fernando		35			A 
			Michael			27			C 
			Abrahim			54			B 
			Yashva			22			A+ 
    </div> 
</body> 
</html>
Related Tutorial
1 Text

Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #