1 - Text-align

This property allows you to define the alignment of a text.


// This code is used to align all the paragraphs to the right.
p {text-align: right; }

2 - Text-color

This is a property used to customize the color of the text


// this example allows to write all the h1 tags in blue
h1 {color: blue; }

3 - Text-decoration

This command allows you to decorate a text with a line at the bottom, above, strikethrough ...

{text-decoration: value; }
  1. value = none :  no decoration 
  2. value = underline : underlined text 
  3. value = overline :  line above 
  4. value = line-through : strikethrough text 
  5. value = blink  :  blinking text (works with Mozilla and Netscape and not with Internet explorer)

4 - Text-indent

This is a property used to specify the offset of the first line of each paragraph. Example:

p {text-indent: 30px; }

5 - Letter-spacing

This property allows you to specify the spacing between characters.


// normal spacing between characters
p {letter-spacing: normal; }


// 3px spacing between characters
p {
letter-spacing: 3px;

6 - Line-height 

This property is used to define the space between the lines of a paragraph Example:

p {line-height: 20px; }

7 - Text-shadow 

This command allows you to decorate text with a shadow, the syntax is:

text-shadow: value1 value2 value3 color;

Where :

  1. value1 : measures the offset of the shadow horizontally to the right in pixels 
  2. value2 : measures the offset of the bottom shadow vertically in pixels 
  3. value3 : measures the thickness of the shadow 
  4. color : shade color Example:
p {
text-shadow: 7px 5px 3px black;

Which displays after execution:

8 - Text-transform 

This command allows you to modify the case of a text; its values ​​are: lowercase: transforms all text into miniscule capitalize: transforms the first letter of each word into uppercase uppercase: transform all text to uppercase inherit: inherit from parents



p {
text-transform: uppercase;

Here is an example of text converted to uppercase
using the text-transform CSS command

Which displays after execution:

Younes Derfoufi

Leave a Reply