We are living in UX era where fast loading and quick interactions are mandatory performance credentials. In such conditions, styling in HTML is a suicidal attempt and packing up all styles in CSS is highly desirable skill for modern web programmers.

In due course, today I am going to introduce you some basic and a few advance CSS properties related to text and textual content by-and-large. First, we will see that, which CSS property is doing what in your web documents and later on we will see how to and where to implement them correctly. Below I have mentioned the name of properties and their short introductory descriptions:

• Color: To set color of text
• Text-Align: To specify the horizontal text alignments (left, center, right, justify, etc.)
• Text-Transform: To set small or Capitalize text
• Text-Decoration: To specify text decoration like underline, over-line, line-through, B, I, etc.
• Text-Indent: To set the indentation for text of the first line of para
• Text-Shadow: To induce the shadow effect on the text
• Line-Height: To set line height for text
• Letter-Spacing: To set spaces between the text characters
• Word-Spacing: To set spaces between the words
• White-Space: To set white space inside the HTML elements including text blocks/para
• Vertical-Align: To set vertical alignments of the text
• Direction: To set the text writing direction like left for English and right for Arabic
• Unicode-bidi: To set support for multiple languages in the same documents along with the direction property.

Most-Used CSS Text Properties

In above listed properties, a few properties are highly used in our day-to-day web programming such as color, line-height, text, align, text-decoration, etc. so let’s examine how they are working in practical with some example codes.

Text Color

There are multiple ways to define colors in HTML/CSS, but three ways of expression are major such as:

• Through, color name (for common programmers): red
• Through, RGB values (for graphic experts): rgb(0,0,255)
• Through, HEX values (for seasoned programmers): #00ff00

As described above color names are few in numbers and general in specification. RGB values can obtain through graphic software like Photoshop. Whereas HEX values also available in graphics software, but for better results, you should have CSS color value list page in your bookmark tab of your browser. Let’s see how they are performing in practical code.

This is heading 1

This is heading 2

This is an ordinary paragraph. Notice that this text is black. The default text-color for a page is defined in the body selector.

This is a paragraph with class=”ex”. This text is blue.

No doubt, if you want to do W3C compliant CSS, you need to add one additional tag of bgcolor in order to define background color so you can get desired contrasts for your text styles.

Text Alignment

You may have noticed that I have added three major horizontal text alignment properties in the code above and obtained fantastic results. It is true that most of the web pages have, either justify or left text alignment properties while very few like big headings are centrally aligned. Many magazines and newspapers use justify tag in order to stretch each line to make equal width and leave equal left and right margins.

Text Decoration

Same as the above, I have included text-decoration property and their values like underline, over-line, and line-through in above example code. Therefore, you can see their distinctive effects in resulting code in image at the top. Here I would like to request you to avoid underline properties for text in body otherwise, it will create a misunderstanding for the link and your visitors will think here is a broken link or missing link.\

I hope these common text properties for CSS is enough for this post and we would see some advanced and some rare CSS text properties in next post in near future.
References & More Reading
http://www.w3schools.com/css/css_text.asp
http://webdesign.about.com/od/css/a/aa112000c.htm
http://webdesign.about.com/od/css101classes/a/bl_cssclass3_3a.htm