As we know, CSS supports many more text formatting properties. We can do so many types of designing with the help of text formatting properties.
Line-height properties
This property is used to manage the space between two lines. When we have to write some sentences, this property has the main role there.
The values for the property can be like – normal, “numbers like 0.5, 1.3, 2”, length like 22 px, percentage like 150%, etc.
In this example, we understand that if we set a higher value of height, then the height for this sentence will be more, and if we reduce the value of height, the height of the sentence will reduce gradually.
Word-spacing property
This property is used for spacing between words.
The values for word spacing can be like – “word-spacing: 4px – Sets the spacing between word of 4px” and “word-spacing: (-4px) – Sets the spacing between word of (-4px)”.
In this example, we notice that when we set a 4px value, the word spacing is in a minimal gap. But when we put (-4px), it means when we decrease the value, the word spacing decreases, and one word collaborates with another word because the value is negative. When we change it to a positive value and increase, the word-space will also gradually increase.
Letter-spacing
This property is used for spacing between the letters or characters. The value for letter spacing can be like – “letter-spacing: 5px – Sets the spacing between letter of 5px”,”letter-spacing: -5px – Sets the spacing between letter of -5px”.
In this example, when we set the 5px value, the letter spacing is in a minimal gap. But when we put (-5px), it means when we decrease the value, the letter spacing decreases, and one letter collaborates with another letter because the value is negative. When we change it to a positive value and increase, the letter space will also gradually increase.
Text-align
The values for the text-align property can be –
Left
Right
Center
Justify
We can use these four properties to set the text per our requirements. Like when we have a requirement to put the text in the left, right, or center position, we can use left, right, and center value properties, respectively.
Text-decoration
We can put or remove decoration with the help of this property. Let’s take some examples to understand how this property works. Ex –
Output can be –
In this example, we take three types of decoration properties – underline, line-through and overline. We can set an underline for the text or sentence. In line-through, we can set a line through the whole text or the sentence. Similarly, we can set a line above the sentence in the overline property. From this example, we understand how these three properties work exactly.
White-space
When we need to control the flow and formatting of the test, there we can use this property. The values for white space can be –
normal
pre
Let’s take some example to understand more about it.
Ex 1 –
<style>
.white-space-pre {
max-width: 300px;
border: 3px solid red;
white-space: pre-line;
}
</style>
<p class=”white-space-pre”>
Format the text using white-space property.
This text has been formatted<br />using white-space property.
This text is formatted using white-space property.
</p>
Ex 2 –
<style>
.white-space-example {
max-width: 350px;
border: solid 2px lightblue;
white-space: normal;
}
</style>
<p class=”white-space-example”>
Format this text using white-space property. </p>
Text-indent
This property is used to set the indentation of text. The value for text-indent can be – length like 1.7px, 50px, 1 cm, percentage like 10%, 25 %, etc. For example –
The output will be –
Ex 2 –
<style>
.indentation {
max-width: 900px;
padding: 10px;
border: 3px solid blue;
text-indent: 30px;
}
</style>
<p class=”indentation”>
Taj mahal is a wonderful creation of Jahangir.
It attracts many people in the world.
Every day many people come to feel its beauty.
It is situated in Agra, India.
</p>
