CSS Text
In this tutorial, today we will teach “how to styled text properties of an element ”? There are numbers of text properties some of which are given below:
- color
- text-align
- word-spacing
- text-decoration
- text-transform
- letter-spacing
- text-indent
- line-height
Text Color
For the defining text color, you can use CSS color property. You can define color values in lots of forms such as:
- a color name or keywords – like “black”
- an RGB color value – like “rgb(255, 99, 72)”
- a HEX color value – like “#cc6347”
Let’s see the given example to understand how color properties works:
Example
In this example we define the Text Color.
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test{
color:red;}
h3{
color:#aaad1c;
}
</style>
</head>
<body>
<h3>how to styled text properties of an element?</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Output
how to styled text properties of an element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Text Alignment
For changing the alignment of a text, you can use the text-align CSS property.
Let’s see the given example to understand how color properties works:
Example
In this example we define the Text Alignment.
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
text-align: center;
}
bor-test2 {
text-align: left;
}
bor-test3 {
text-align: right;
}
</style>
</head>
<body>
<h4>Hello Netzole</h3>
<p class="bor-test2">It has been the industry's standard dummy text ever since the 1500s</p>
<p class="bor-test3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
Output
Hello Netzole
It has been the industry’s standard dummy text ever since the 1500s
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.