CSS Tutorial (CSS text)

This page describes you to understand about CSS text property and its type.CSS text property is used to manipulate user’s text that is written on web pages.let’s see towards text property of CSS topic.

define properties that exist in CSS text property

1. The color property is used to set the color of a text.
2. The direction property is used to set the text direction.
3. The letter-spacing property is used to add or subtract space between the letters that make up the word.
4. The word-spacing property is used to add or subtract space between the words of a sentence.
5. The text-indent property is used to indent the text of a paragraph.
6. The text-align property is used to align the text of a document.
7. The text-decoration property is used to underline, overline, and strikethrough text.
8. The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
9. The white-space property is used to control the flow and formatting of text.
10. The text-shadow property is used to set the text-shadow around a text.

Let’s see the full description about CSS text property.

Text Color CSS property

let’s see an example of text color property.

<html>
<head>
<title>
CSS text color effect
</title>
<style>
p
{
 color:red;
}
</style>
</head>
<body>
<p>This is Your Tech home not a dummy text.</p>
</body>
</html>

This will produce following result.

CSS text color Example

CSS direction Property

Let’s see the following result.

<html>
<head>
<title>
CSS Direction Property
</title>
<style>
body
{
   direction:rtl;     /*Comment(right to left direction)*/
}
</style>
</head>
<body>
This is your Tech Home not a dummy text.
</body>
</html>

This will provide following result.

Text direction Property

CSS letter-spacing Property

Let’s see the example of CSS letter-spacing property.

<html>
<head>
<title>
</title>
<style>
p
{
  letter-spacing:10px;
}
</style>
</head>
<body>
<p>This is Your Tech Home not a dummy text.</p>
</body>
</html>

This will provide following result.

letter-spacing Example

CSS word-spacing property

let’s see an example of CSS word-spacing property.

<html>
<head>
<title>
</title>
<style>
p
{
   word-spacing:10px;
}
</style>
</head>
<body>
<p>This is Your Tech Home not a dummy text.</p>
</body>
</html>

This will produce following result.

word-spacing Example

CSS text indent property

Let’s see an example of CSS text property.

<html>
<head>
<title>
</title>
<style>
p
{
text-indent:2cm;
}
</style>
</head>
<body>
<p>This is Your Tech Home not a dummy text.</p>
</body>
</html>

This will generate following result.

text-indent Example

Text align CSS Property

let’s see an example of CSS Text-align property.

<html>
<head>
<title>
CSS text-align Property
</title>
<style>
#left
{
    text-align:left;
}
#center
{
text-align:center;
}
#right
{
   text-align:right;
}
</style>
</head>
<body>
<p id="left">This is Your Tech Home.</p>
<p id="center">This is Your Tech Home.</p>
<p id="right">This is Your Tech Home.</p>
</body>
</html>

This will produce following result.

text-align Example

Text decoration CSS property

Let’s see an example of Text-decoration CSS Property.

<html>
<head>
<title>
CSS text-align Property
</title>
<style>
#under
{
    text-decoration:underline;
}
#over
{
text-decoration:overline;
}
#strike
{
   text-decoration:line-through;
}
</style>
</head>
<body>
<p id="under">This is Your Tech Home.</p>
<p id="over">This is Your Tech Home.</p>
<p id="strike">This is Your Tech Home.</p>
</body>
</html>

This will provide following result.

Text-decoration CSS Property

Note:- Other properties of CSS text as it is used.you can try in your notepad and see the results on browsers.

<<< previous
next >>>

Share post