Friday, May 15, 2009

CSS Text

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.


In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.



CSS Text Color




<p style="color:olive;">This CSS text color is olive</p>



This results in:



This CSS text color is olive




CSS Text Align




<p style="text-align:right;">This CSS text is aligned right</p>




This results in:



This CSS text is aligned right




CSS Text Indent


Indents the first line of the paragraph.




<p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>



This results in:



This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!




CSS Letter Spacing




<p style="letter-spacing:5px;">This text has letter spacing applied</p>




This results in:



This text has letter spacing applied




CSS Word Spacing




<p style="word-spacing:50px;">This text has word spacing applied</p>




This results in:



This text has word spacing applied




CSS Text Decoration




<p style="text-decoration:overline;">This text has a line over the top</p>

<p style="text-decoration:line-through;">This text has a line through the middle</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >
This hyperlink has no underline</a>
<p style="text-decoration:blink;">This text is blinking</p>




This results in:



This text has a line over the top


This text has a line through the middle


This text has a line underneath


This hyperlink has no underline

This text is blinking




CSS Text Transform




<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been capitalized.</p>




This results in:



This text has been transformed to uppercase


THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE


this text has been capitalized.





CSS Text Direction





<p style="direction:rtl;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>


This results in:



This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...




CSS unicode-bidi



Use this in conjunction with the direction property to determine the direction of the text. Possible values: normal, embed, bidi-override, and inherit.




<p style="direction:rtl;unicode-bidi:bidi-override;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>



This results in:



This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...




CSS Text Shadow




<p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>



This results in:



If your browser supports the CSS text-shadow property, this text will have a shadow.





CSS White Space


Tells the browser how to handle white space. Possible values: normal, pre, and nowrap.





<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>



This results in:



This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.





Related Posts by Categories



Widget by Hoctro | Jack Book

0 comments:

Post a Comment

 

©2009 daily news | by TNB