CSS Text

The CSS Text properties are used  to format text with various styles. The CSS text properties are as follows :


1. Text Color : 

The text color property is used to set the color of the text. The basic syntax is :
 color: color_name;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Color</title>
</head>
<body>
  <p style="color: red;">Hello world This is The first Paragraph</p>
  <p style="color: green;">Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph

Note that for color values we can also use hex values or rgb color values. For more information about this, look at HTML Colors.


2. Text Direction : 

The CSS text direction property is used to change the text direction of an element. There are two values  for direction property.

    ltr (left to right)
    rtl (right to left)

Syntax :
 direction: ltr|rtl
Example :
<!DOCTYPE>
<html>
<head>
    <title>Text-Direction</title>
</head>
<body>
    <p style="direction: ltr;">Hello world This is The first Paragraph</p>
    <p style="direction: rtl;">Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph


3. Text Alignment :

The text-align property is used to set the horizontal alignment of text. The values of text align property are center, left, right or justify. Where the value justify set both the side (left and right) equal like books or newspaper.

Syntax :
 text-align: left|right|center|justify;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Alignment</title>
</head>
<body>
  <p style="text-align: left;">Hello world First</p>
  <p style="text-align: right;">Hello world Second</p>
  <p style="text-align: center;">Hello world Third</p>
  <p style="text-align: justify;">Hello world, This is the fourth paragraph of the text page to test the value justy.</p>
</body>
</html>
Output :

Hello world First
Hello world Second
Hello world Third
Hello world, This is the fourth paragraph of the text page to test the value justy.


4. Text Decoration :

The text-decoration property is used to decorate the text. The possible values of text-decoration property are underline, overline, blink, line-through, none etc.

Syntax :
 text-decoration: underline|overline|blink|line-through|none;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Decoration</title>
</head>
<body>
  <p style="text-decoration: underline;">Hello world, Underline Text-Decoration</p>
  <p style="text-decoration: overline">Hello world, overline Text-Decoration</p>
  <p style="text-decoration: blink;">Hello world, blink Text-Decoration</p>
  <p style="text-decoration: line-through;">Hello world, line-through Text-Decoration</p>
  <p style="text-decoration: none;">Hello world, none Text-Decoration</p>
</body>
</html>
Output :

Hello world, Underline Text-Decoration
Hello world, overline Text-Decoration
Hello world, blink Text-Decoration
Hello world, line-through Text-Decoration
Hello world, none Text-Decoration

Also note that it is not recommended to underline text that is not a link, as this often confuses the reader.

5. Text Indentation :

The text-indent property is used to specify the indentation of the first line of a text. It means to set the how much space leave by paragraph's first line in left side. The value of text-indent property is set in pixels, cm, in. Syntax :
 text-indent: 50px;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Indentation</title>
</head>
<body>
  <p style="text-indent: 60px;">Web development is a broad term for the work involved in
  developing a web site for the Internet (World Wide Web) or an intranet (a private network).
  Web development can range from developing the simplest static single page of plain text to
  the most complex web-based internet applications (or just 'web apps') electronic businesses,
  and social network services.</p>
</body>
</html>
Output :

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just 'web apps') electronic businesses, and social network services.


6. Text-Transformation :

The text-transformation property is used to transform the text into uppercase or lowercase letters. The possible values of text-transformation property are lowercase, uppercase and capitalize. Where the uppercase will transform all the letters to uppercase, lowercase will transform all the letters to lowercase and capitalize will transform first letter to capital for all word. Syntax :
 text-transform: uppercase|lowercase|capitalize;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Transformation</title>
</head>
<body>
  <p style="text-transform: uppercase;">Hello world, uppercase</p>
  <p style="text-transform: lowercase;">Hello world, lowercase</p>
  <p style="text-transform: capitalize;">Hello world, capitalize</p>
</body>
</html>
output :

Hello world, uppercase
Hello world, lowercase
Hello world, capitalize


7. Letter Spacing :

The letter-spacing property is used to specify the space between the characters in a text. The value of letter-spacing would be in pixels. Syntax :
 letter-spacing: 10px;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Letter-Spacing</title>
</head>
<body>
  <p style="letter-spacing: 2px;">Hello world</p>
  <p style="letter-spacing: -1px;">Hello world</p>
  <p style="letter-spacing: -2px;">Hello world</p>
</body>
</html>
Output :

Hello world
Hello world
Hello world


8. Word-Spacing :

The word-spacing property is used to specify the space between the words in a text. The value of word-spacing would be in pixels. Syntax :
 word-spacing: 5px;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Word-Spacing</title>
</head>
<body>
  <p style="word-spacing: 5px;">Hello world, This is test paragraph.</p>
</body>
</html>
Output :

Hello world, This is test paragraph.


9. Line-height

The line-height property is used to specify the space between lines. Example :
<!DOCTYPE>
<html>
<head>
  <title>Line-height</title>
</head>
<body>
  <p style="line-height: 40px;">Web development is a broad term for the work involved in developing
   a web site for the Internet (World Wide Web) or an intranet (a private network). Web development
   can range from developing the simplest static single page of plain text to the most complex
   web-based internet applications (or just 'web apps') electronic businesses, and social network
   services.</p>
</body>
</html>
Output :

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just 'web apps') electronic businesses, and social network services.


10. White-Space :

CSS white-space property use to set a predefined task. The possible values for white-space property are pre, normal and nowrap. Example :
<!DOCTYPE>
<html>
<head>
  <title>White-Space</title>
</head>
<body>
  <p style="white-space: pre;">Hello world, This is the first paragraph </p>
  <p style="white-space: normal;">Hello world, This is the first paragraph </p>
  <p style="white-space: nowrap;">Hello world, This is the first paragraph </p>
</body>
</html>
Output :

Hello world, This is the first paragraph
Hello world, This is the first paragraph
Hello world, This is the first paragraph


11. Text-shadow :

The text-shadow property is used to add shadow on the text. The Syntax would be :
 text-shadow: 2px 3px orange;
At the above syntax the first value specifies the position of horizontal shadow (2px), second one specifies the position of vertical shadow (3px) and third one is for the color of shadow (orange).

Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Shadow</title>
</head>
<body>
  <p style="text-shadow: 2px 3px orange;">Hello world, This is the first paragraph</p>
</body>
</html>
Output :

Hello world, This is the first paragraph


Next Topic :