Chapter 9 - What are Text Properties in CSS?

If you want to format a simple text to a stylish text, then you have to use text properties of style sheet.

What main task you can perform with the text properties?

There are several task we can perform with text properties and written below:-

• Text Color

• Color by name – red,green, blue...etc.
• Decimal color - 123456, 985458...etc.
• Hexadecimal color –#ffffff, #000aec...etc)
• RGB color – rgb(255, 255, 255), rgb(0, 0, 0)...etc.

NOTE:- While choosing color with any property of stylesheet, keep in mind the following checklist:-

1. Color by Name:- Write correct color name.
2. Decimal Color:- Use numbers from 0 to 9.
3. Hexadecimal Color:- Use letters from A to F or a combination with numbers upto 6 digits as show in above example of hexadecimal color.
4. RGB Color:- Use numbers starting from 0 to 255 in brackets as shown in above example of RGB color.

Example for setting Text Color:-

 /* Syntax of Text color Property of CSS*/

 text-color:orange;
 text-color:123456;
 text-color:#ff2354;
 text-color:rgb(129,0,255);

• Letter Spacing

• If you want to adjust the space between letters, then letter spacing property will be used in style sheet.
• You can use positive or negative value to increase or decrease space between letters.
• You can either use pixel or normal value to set or reset space.

Example for setting Letter Spacing:-

 /*Syntax of Letter Spacing Property of CSS*/

 letter-spacing:normal;
 letter-spacing:10px;

• Word Spacing

• If you want to adjust the space between words, then word spacing property will be used in style sheet.
• You can use positive or negative value to increase or decrease space between words.
• You can either use pixel or normal value to set or reset space.

Example for setting Word Spacing:-

 /*Syntax of Word Spacing Property of CSS*/

 word-spacing:normal;
 word-spacing:10px;

• Text Align

• Text Align property is used to align a text according to the requirement. There are 4 values of text align property:-
1. Left Align
2. Right Align
3. Center Align
4. Justify

Example for setting Text Align:-

 /*Syntax of Text Align Property of CSS*/

 text-align:left;
 text-align:center;
 text-align:right;
 text-align:justify;

/*Left Align Text
             Center Align Text
                          Right Align Text

This is a Justified Text in style sheet/css.*/

• Text Decoration

• You can decorate your text with 5 values of your choice.
1. None
2. Underline
3. Overline
4. Line-through
5. Blink 

Example for setting Text Decoration:-

 /*Syntax of Text Decoration Property of CSS*/

 text-decoration:none;
 text-decoration:overline;
 text-decoration:underline;
 text-decoration:line-through;
 text-decoration:blink;  

• Text Indent

• If you want to indent space to your paragraph then you can use text indent property. 
• But this will create space or indent only first line of your paragraph.

Example for setting Text Indent:-

 /*Syntax of Text Indent Property of CSS*/

 text-indent:50px;

• Text Transform

• You can control the formation of your text with the help of text transform property.
• It is of 4 types:-
1. None
2. Capitalize
3. Uppercase
4. Lowercase

Example for setting Text Transform:-

 /*Syntax of Text Transform Property of CSS*/

 text-transform:none;
 text-transform:capitalize;
 text-transform:uppercase;
 text-transform:lowercase;

• White Space

• You can control the white space in your HTML element with the help of white space in style sheet.
• It has 3 values:-
1. Normal
2. Pre
3. Nowrap 

Example for setting White Space:-

 /*Syntax of White Space Property of CSS*/

 white-space:normal;
 white-space:pre; 
 white-space:nowrap; 

I have written about text properties in very easy to learn and easy to understand language. If you still have any question related to these properties, you can leave your comment.

NOTE:- For proper use of Text Properties, read posts on each topic in the next section of this blog.