Common CSS styles for Text

Please visit my new Web Site WWW.Codedisplay.com

Its quite impossible to remember all CSS property to manage UI. The best way is create a css file & use it in your applications by modifying if needed. Most of the times we did this. Copy & paste. I am also can't remember thats why i am planning to enlist all common CSS properties in my blog so that i can find required properties when needed. I have almost in my project always try to use CSS to present UI instead of images. I can assure you that almost 80% time you can replace images by using CSS styles. So avoid image & try to CSS properly which will faster your page load. In this article i will concentrate on below issues:

1. CSS Text Color
2. CSS Text Decoration
3. CSS Text Indent
4. CSS Text Align
5. CSS Text Transform
6. CSS White Space
7. CSS Word Spacing
8. CSS Letter Spacing
9. CSS Line Height

CSS Text Color:
By using this property you can set the color of your text within a Paragraph or within DIV no matter. You can also define full page text color css in the body selector. Few sample usage of CSS to color your page Text is given below:

CSS Code:

body {color:white}
p {color:lightslategray}
div {color:gray}

CSS Output:

This is the body TEXT.
This is the body TEXT. Color name is "white".

This is the Paragraph. See the TEXT color lightslategray.

This is the DIV. See the TEXT. This is the paragraph TEXT & forecolor is gray.

You can also use color hex code or RGB to define CSS for your Text like:

p {color:#00CED1}
div {color:rgb(240,248,255 )}

CSS Text Decoration:
Tme main purpose of decorating text is to set underline for URL link or not. Another reason is CSS Text Decoration can apply horizontal line above, below or within the Text.

CSS Code:

a { text-decoration: none; }
span{text-decoration: line-through;}
p{ text-decoration: overline; }
div{ text-decoration: underline; }

CSS Output:

Asp.net Articles

Its span Text. See the CSS line-through effect.

Its Paragraph Text. See the CSS overline style effect.

Its Div Text. See the CSS underline effect.

CSS Text Indent:
By using CSS indentation you can easily achieve Text indent within a Paragraph or DIV or even SPAN. Its a common replacement of pre tag & white spaces.

CSS Code:

p { text-indent: 50px;COLOR: #c71585; }
div { text-indent: 100px;COLOR: #cd5c5c; }

CSS Output:

Its PARAGRAPH Text. See the CSS effect for indentation. Here i have used 50px. Did you see this effect? Its applicable within your PARAGRAPH. Whatever number of PARAGRAPH is in your page. CSS is smart enogh to apply styles in all PARAGRAPH of your page.

Its DIV Text. See the CSS effect for indentation. Here i have used 100px. Did you see this effect? Its applicable within your DIV. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

CSS Text Align:
If you didn't specify the alignment of text then bydefault text is aligned to the left. Within CSS we can use four types of alignment properties such as Left, Center, Right & Justified. Few uses of text alignment is given below:

CSS Code:

div { text-align:left; }
p { text-align:center; }
h5 { text-align:right; }
p { text-align:justify; }

CSS Output:

Its DIV Text. See the CSS effect for alignent. Here i have used LEFT Alignment.
Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

Its a paragraph. Here i used center alignment.

Its h5. Here i used right alignment.

Its PARAGRAPH Text. See the CSS effect for alignent. Here i have used justify Alignment. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enough to apply styles in all DIV of your page. Check this PARAGRAPH text with justify align. In this PARAGRAPH the TEXT is streched from LEFT to RIGHT with proper alignment.

CSS Text Transform:
Text transform is used to convert the line from upper to lower or lower to upper case. The Text-tranform also used to capitalized the first character of each line such as Nwspaper para.

CSS Code:

div { text-transform: capitalize; }
p{ text-transform: uppercase; }
span{ text-transform: lowercase; }

CSS Output:

Its DIV Text. see the CSS effect to transform Text. Here i have used Capitalized CSS style. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

Its DIV Text. See the CSS effect TO TRANSFORM TEXT. Here i have used UPPERCASE TRANSFORMATION. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this div text with left align div. In this div the TEXT is streched from LEFT to RIGHT with proper alignment.

Its DIV Text. See the CSS effect to transform text. Here i have used lowercase transformation for TEXT. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this div text with left align div. In this div the TEXT is streched from LEFT to RIGHT with proper alignment.

CSS White Space:
The White Space CSS property specifies how one can handle white-space inside an element. You can prevent text wrapping or not by using this CSS property. CSS for white space, just keep in mind that if you use "white-space: nowrap;" then the browser doesn't render break until br tag found. The opposite is true for "white-space: wrap;" means browser automatically render break within the specified area even if you does not write br tag within the text.

CSS Code:

p { white-space: nowrap; }
div { white-space: wrap; }

CSS Output:

Its PARAGRAPH Text. See the CSS effect for White Space. Here i have used nowrap CSS. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this PARAGRAPH text that CSS does not wrap the text until page break appeared. Whether if you look at the below section then you will found that CSS wrap the text whatever page break found or not.

Its DIV Text. See the CSS effect for White Space. Here i have used wrap as CSS. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this DIV text that CSS wrap the text whether page break found or not.

CSS Word Spacing:
Here i will show you how we can specify the space between words. If you see my posts you will get a lot of example on Word Spacing. Here i will show you another example on CSS Word Spacing.

CSS Code:

p { word-spacing: -1px; }
div { word-spacing: 10px; }

CSS Output:

THIS IS A TEST TEXT WITH WORD SPACING -1 PX.

THIS IS A TEST TEXT WITH WORD SPACING 10 PX.

CSS Letter Spacing:
Here i will show you how we can specify the spacing between Letters. If you see my posts you will get a lot of example on Letter Spacing. Here i will show you another example on CSS Letter Spacing.

CSS Code:

p { letter-spacing: -1px; }
div { letter-spacing: 5px; }

CSS Output:

THIS IS A TEST TEXT WITH LETTER SPACING -1 PX.

THIS IS A TEST TEXT WITH LETTER SPACING 5 PX.

CSS Line Height:
Yes you can also control paragraph line height by using CSS line height property. Specially most of the developer use graphich tools to generate header & sub header images for a page. But most of the times i think that if anyone knows CSS power then he can reduce almost 80+% of images from a page. Which will give you the most expected faster loading.

CSS CODE:

p{line-height:50%}
p{line-height:80%}

CSS Output:

THIS IS A TEST TEXT WITH LINE HEIGHT 50%.
THIS IS A TEST TEXT WITH LINE HEIGHT 50%.

THIS IS A TEST TEXT WITH LINE HEIGHT 80%.
THIS IS A TEST TEXT WITH LINE HEIGHT 80%.