Text Effects in CSS


Special Effects

Some special effects in CSS Italics and Boldness Example<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>

Capitilaztion

CSS provide two properties to specify the capitaliation of text,font-variant is used to set all characters in small versions of capital letters:

The first property is font-variant:

Example <html> <head> <style> p{ font-variant: small-caps; } </style> </head> <body> <p >it will display text like this.</p> </body> </html>

The second property is text-transform:

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>

Text decoration

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>

Text alignment

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

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>
Chapter Next »