In css3 there are following properties for text are defined below.
1) There is a property named as text-color
This property is used for specify the different colors of text which are
explained below.
2) There is another property named as text-alignment
This property is to specify alignment to the text.
3) There is another property named as text-decoration
This property is used for decoration of text.
4) There is another property named as text-transform
This property is used for decoration of text.
5) There is another property named as text-spacing
This property is used for specify space between text.
6) There is another property named as text-shadow
This property is used give the different attractive shadow to the text.
Text color
<p style="color: red;"> This is a red text </p>
<p style="color: orange;"> This is a orange text </p>
<p style="color: blue;"> This is a blue text </p>
<p style="color: green;"> This is a green text </p>
<p style="color: yellow;"> This is a red text </p>
Output of above code
This is a red text
This is a orange text
This is a blue text
This is a green text
This is a yellow text
Text alignment
There are following properties for text alignment
1) - text-align: right;
2) - text-align: left;
3) - text-align: center;
<style type="text/css">
.d-1{
text-align: right;
width: 100%;
border: 1px solid green;
}
.d-2{
text-align: left;
width: 100%;
border: 1px solid green;
}
.d-3{
text-align: center;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">Text align right</h4>
<h4 class="d-2">Text align left</h4>
<h4 class="d-3">Text align center</h4>
Output of above code
Text align right
Text align left
Text align center
Text decoration
There are following properties for text decoration
1) - text-decoration: none;
2) - text-decoration: overline;
3) - text-decoration: line-through;
4) - text-decoration: underline;
<style type="text/css">
.d-1{
text-decoration: none;
width: 100%;
border: 1px solid green;
}
.d-2{
text-decoration: overline;
width: 100%;
border: 1px solid green;
}
.d-3{
text-decoration: line-through;
width: 100%;
border: 1px solid green;
}
.d-4{
text-decoration: underline;
width: 100%;
border: 1px solid green;
}
</style>
<h5 class="d-1">Text decoration none</h5>
<h5 class="d-2">Text decoration overline</h5>
<h5 class="d-3">Text decoration line-through</h5>
<h5 class="d-4">Text decoration underline</h5>
Output of above code
Text decoration none
Text decoration overline
Text decoration line-through
Text decoration underline
Text transform
There are following properties for text decoration
1) - text-transform: uppercase;
2) - text-transform: lowercase;
3) - text-transform: capitalize;
<style type="text/css">
.d-1{
text-transform: uppercase;
width: 100%;
border: 1px solid green;
}
.d-2{
text-transform: lowercase;
width: 100%;
border: 1px solid green;
}
.d-3{
text-transform: capitalize;
width: 100%;
border: 1px solid green;
}
</style>
<h5 class="d-1">Text transform uppercase</h5>
<h5 class="d-2">Text transform lowercase</h5>
<h5 class="d-3">Text transform capitalize</h5>
Output of above code
Text transform uppercase
Text transform lowercase
Text transform capitalize
Text spacing
<style type="text/css">
.d-1{
letter-spacing: 5px;
width: 100%;
border: 1px solid green;
}
.d-2{
letter-spacing: -5px;
width: 100%;
border: 1px solid green;
}
</style>
<h5 class="d-1">letter space 5px</h5>
<h5 class="d-2">letter space -5px</h5>
Output of above code
letter space 5px
letter space -5px
text shadow
<style type="text/css">
.d-1{
text-shadow: 4px 4px 10px green;
color: blue;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">Text with shadow</h4>
Output of above code
Text with shadow
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
