The text-indent Property
Indention is the horizontal space on the left side of the selected text. Indentation is used to set the appearance of text. When we set the indentation of text it will move to right side leaving space on the left. For example, In programming, indentation is necessary to use as it makes code understandable and attractive. You can see in any IDE, indentation makes code look perfect.
In CSS, the text-indent property is used to set the indentation of selected HTML element. It may be a paragraph , heading or form. It has default value as 0.
Values it takes:-
- length: this value is used when we want to specify the property in specific way using points, pixels,centimetre,ems etc.
- percentage: we can also give the value in percentages.
- inherit: the text will inherit the indent property from its parent element.For example, If parent element is <body> then to change indentation, you first need to change the text indent of body. We will see its example below.
- initial:the text will indented to default value of text-indent property.
Example: This example demonstrates the use of text-indent property's values.
HTML Code:
<body>
<p>This is an example of <strong> text-indent </strong> Property.</p>
<p class="length">First line of text will be indented to right in 50 px. You can also use points(pt),cm,em, values instead of px to specifies the value.</p>
<p class="percentage">This text is indented using percentage value(20%)</p>
<p class="inherit">This paragraph inherits the text-indent value of parent element</p>
<p class="initial">This paragraph displays the default value of text-indent.</p>
</body>
CSS Code:
p.length{
color: red;
text-indent: 50px;
}
p.percentage{
color: green;
text-indent: 20%;
}
p.inherit{
color: blue;
text-indent: inherit;
}
p.initial{
color: blue;
text-indent: inherit;
}
Result:
inherit property value does not add any effect in above example because the text-indent value of parent is default, or the parent is <body> of the document whose text-indent property is not set.
Lets see another example to check inherit value's effect.
Changing indentation using inherit value
In above example, indentation of the paragraph did not change because the parent element <body> had default value (0) indentation. Now lets change the indentation of <body> then use the same inherit value.
HTML Code:
<body>
<p class="initial">This paragraph displays the default value of text-indent.</p>
</body>
CSS Code:
body{
color: blue;
text-indent: 70px;
}
p.inherit{
text-indent: inherit;
}
Result:
Negative values
You can use the negative value in text-indent property,. The only difference is text will be indented to left side of page.
You can apply negative values to length and percentage, inherit value will remain same.
Expeiment:- Use the negative values and check their effects . Happy Coding!
Comments
Post a Comment
If you have any doubt, ask here