<html>
<head>
<style>
p#ist{
font-style:italic;
}
p#second{
font-weight: bold;}
p#third {
text-decoration: underline;
}
</style>
</head>
<body>
<p id="ist">This font-style in italics</p>
<p id="second">The property that controls the boldness of text is font-weight </p>
</body>
</html>CSS provide two properties to specify the capitaliation of text,font-variant is used to set all characters in small versions of capital letters:
<html>
<head>
<style>
p{
font-variant: small-caps;
}
</style>
</head>
<body>
<p >it will display text like this.</p>
</body>
</html>
The possible values of text-transform are shown in following e.g.
Example<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
p.none {
text-transform:none;
}
</style>
</head>
<body>
<p class="uppercase">makes all the letters capitals.</p>
<p class="lowercase">MAKES ALL THE LETTERS SMALL</p>
<p class="capitalize">capitalize the first letter in every word .</p>
<p class="none">override any inherited transformation</p>
</body>
</html>The last formatting property is text-decoration,It is normally used to remove the underlines from hyperlinks. The possible values of text-decoration are shown in following e.g.
Example<html>
<head>
<style>
p.underline {
text-decoration:underline;
}
p.overline{
text-decoration:overline;
}
p.line-through {
text-decoration:line-through;
}
p.blink {
text-decoration:blink;
}
p.none {
text-decoration:none;
}
</style>
</head>
<body>
<p class="underline">adds an underline. </p>
<p class="overline">adds a line over the text.</p>
<p class="line-through"> creates a strike through effect.</p>
<p class="blink">makes the text flash on and off. it is not supported by internet explorer.</p>
<p class="none">removes any extra formatting and makes the text normal.</p>
</body>
</html>
It only works on block level elements i.e H1,P etc
<html>
<head>
<style>
p.right{text-align: right;}
p.left{text-align: left;}
p.center{text-align: center;}
p.justify{text-align: justify;}
</style>
</head>
<body>
<p class="right">This text is align right </p>
<p class="left">This text is align left </p>
<p class="center">This text is align center </p>
<p class="justify">This text is align justify</p>
</body>
</html>
Text layout is used to control exactspacing between letters,words and lines.
Example<html>
<head>
<style>
p.letter{letter-spacing: 3px;}
p.word{word-spacing: 5px;}
p.line{line-height: 3pt;}
p.indent{text-indent:10px;}
</style>
</head>
<body>
<p class="letter">This example add a space of 3 pixels after every letter.</p>
<p class="word">This example add a space of 3 pixels after every word </p>
<p class="line">This example insert a line spacing of 3 pixels.</p>
<p class="indent">This command indents the first line in every paragraph.</p>
</body>
</html>