CSS Text
In CSS many more properties are there by which we can define different effects in our text .
And these effects are as follows:-
Text color
If we want to give color to any text through this text color property we can do that also.
Let's understand this by the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
color:blue;
}
</style>
</head>
<body>
<div>
<p> I am <span class="main">Manish </span> </p>
<p class="red"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired text color here through text-color property .
Text alignment
If we want to set our text at the left side,right side ,center than we can use this text alignment property.
Let's understand this by the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align:right;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<p> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So changes the position of our paragraph from left to right.
Text decoration
If we want to add or remove simply the decoration from the text.
The possible values of text-decoration will be :-
- underline
- overline
- line-through
- none
Let's understand this by the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<p> I am <span class="main">Manish </span> </p>
<p class="red"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
Values | Description |
color | Sets the color of text |
direction | specify text direction |
letter-spacing | Increases or decreases the space between characters in a text |
line-height | Sets the line height |
text-align | Specifies the horizontal alignment of text |
text-decoration | Specifies the decoration added to text |
text-indent | Specifies the indentation of the first line in a text-block |
text-shadow | Specifies the shadow effect added to text |
text-transform | Controls the capitalization of text |
text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
vertical-align | Sets the vertical alignment of an element |
white-space | Specifies how white-space inside an element is handled |
word-spacing | Increases or decreases the space between words in a text |