Some CSS Text Properties

23. March 2010 09:29

CSS Text Properties

 

Not too long ago when I was first taught HTML, there was a collection of tags used to format the text. There were tags for making text italic, bold, underlined, and so on. Now if you look on other web design sites, all of those tags are not considered good practice to use anymore. “Deprecated” is the term you see thrown out a lot of times, for HTML tags that they don’t want you to use anymore. Though the tags are still supported by browsers, but who knows for how long?  Everything is now aimed at CSS styles. That is why I’ve been going into the last two posting with CSS. And for those like me, who need a refresher course, here we are.

 

From the HTML Tags to their CSS counterpart, a few examples.

 

Center:  <center>  to  text-align:center;

Underline: <u>  to text-decoration:underline;

Strikeout: <s> to text-decoration:line-through;

 

The CSS styling is cleaner for the html code. You don’t have to confuse yourself with a mess of nested font styling tags. So the text properties available for CSS styling include:

  • color—Naturally it sets the color of text
  • direction—You can set the direction of the text from left to right to right to left.
  • line-height—How much space you want to go between the lines.
  • letter-spacing—Change the amount of spacing between letters.
  • text-align—left, center, right, justify
  • text-decoration—Here you will insert all of the classic decorations, such as underline, overline, line-through, none, and blink (Which is not supported by IE, it was originally a Netscape tag.)
  • text-shadow—gives a shadow to the text. Options are none, color, and length.
  • text-transform—Choose how the letters appear, be it none, capitalized, uppercase, or lowercase.
  • vertical-align—Set how the element aligns on the page. Options are baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, and % (percentage).
  • white-space—Configure the ways in which white space in your page element will appear. Choices are normal, pre, and nowrap.
  • word-spacing—You can set the gaps between words, options are normal and a specified  length.

           





Comments

3/27/2010 7:30:23 AM #

duvet covers

Keep working ,great job!

duvet covers United States |

4/28/2010 1:02:03 AM #

Rapidshare

I\'m happy I found this blog, I couldnt discover any info on this subject matter prior to. I also run a site and if you want to ever serious in a little bit of guest writing for me if possible feel free to let me know, i\'m always look for people to check out my site. Please stop by and leave a comment sometime!

Rapidshare United States |

5/6/2010 2:52:04 PM #

camo cargo pants

I'm new at CSS, this is a handy reference Smile

camo cargo pants United States |

5/8/2010 6:50:27 PM #

Mariana

I was actually looking around for a blog post on this issue, but stumbled across your site on Google!! I’m actually quite interested so will keep an eye out for updates Smile

Mariana United States |

5/20/2010 1:59:33 AM #

Wahdo

If you have to do it, you might as well do it right.

Wahdo United States |

5/24/2010 5:55:53 PM #

Joel

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.Any way Ill be subscribing to your feed and I hope you post again soon

Joel Germany |

6/18/2010 11:17:08 PM #

няня

I would like to thank you for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now.
http://svitlana.net.ua/staff/category/3/ гувернантка, http://svitlana.net.ua/staff/category/5/ повар, http://svitlana.net.ua/staff/category/6/ садовник, http://svitlana.net.ua/staff/category/10/ репетитор, http://svitlana.net.ua/staff/category/4 домработница, http://svitlana.net.ua/staff/category/8/ семейная пара, http://svitlana.net.ua/pages/2/ работа няней.

няня United States |

6/24/2010 4:44:49 AM #

homepage template

Will you make the homepage with a free homepage template?The homepage can be easily made with the template.

homepage template Japan |

6/25/2010 1:30:36 PM #

recover data

Good! Nice article to explain CSS easily. Cascading style sheet helps designer to design webpage by using different tags and properties instantly with lots of features.

recover data United States |

7/17/2010 1:03:49 PM #

miami car service

This is the really a good website and nice tutorial too hope this will helped me out..

miami car service United States |

8/19/2010 1:55:25 PM #

Atlanta Limo

Amazing post!!, I got  a lot useful knowledge.

Atlanta Limo United States |



About the author

 The creators of the Web Design Blog have been creating web designs for over 12 years

Page List