Text Indent Property
While viewing some educational websites, you must have seen such paragraphs or text boxes that start with the first line from a distance of a whole paragraph, making it more prominent and appealing. This is done by making the first line of the text indented. Not only the first line, but we can also indent the second line keeping the first line intact. This text property is taken in either pixel or percentages. The syntax for the indentation of text is:
This property can be applied on any HTML content. However, now we will apply this property on the text. HTML and CSS both are the backbone languages for the front-end development and design of a webpage. HTML contains two basic sections: head and body sections. Both these portions are described with the tags:
All the HTML contents are described in the body sections. The head section contains the title of the webpage and the CSS if it is internal CSS. The basic HTML tags used in this article will be explained at the implementation time. Talking about the CSS declaration, we have used internal CSS among three CSS types. The CSS properties are declared inside the style tag, which is declared in the head tag.
There are several approaches to indenting the second line of the HTML paragraph. Some of the simple methods are explained below.
Example 1
First, we used an example to apply the CSS property of indent on a paragraph text of HTML. As the article’s name shows, we need to indent the second line of the text. In this example, we applied the indent property so that the first line of the paragraph remains the same at the point where it was before. However, the paragraph from the second line will be indented. Let us start with the example code. First, consider the body section, where a simple paragraph tag is used to apply the indent.
A simple heading is declared, which we will not apply any effect. The paragraph tag is declared inside the div. It is a container that keeps the HTML contents at a specific point. Similarly, here we will declare a div. A class is also declared here.
In CSS, the designing is done through the ids or the classes. All the effects we want to apply are written inside the class declaration in the CSS body. In the head portion, we need to mention the name at the point where we want to apply these effects.
Close all the tags and the HTML body as well. Once the HTML contents are declared, a single paragraph and a heading will be displayed when you run the page on the website. We will use the following CSS code to apply effects on this.
Heading toward the style tag, a div for the class is explained with the features we want to apply to this container. The text-indent of -36px is used, which means that the first line will not be indented. However, the first line is moved towards the left compared to the remaining paragraph lines. This is done by declaring the div’s left side padding 36px. Both the values are set in pixel units.
text-indent: -36px;
padding-left: 36px; }
The padding property is for the inner content, which the outer one controls. This is the distance between the text boundary and the div container boundary. Now, save the code with the HTML extension and execute the webpage on the browser.
You will see a simple heading. A paragraph has the first line intact, but the second and all the other lines are shifted towards the right. The text-indent property of CSS does this.
Example 2
The text-indent property will be applied to the heading in this example. A simple heading is declared. After that, we used the paragraph tag to add text to it. The id in the div container will be applied to the whole div precisely in the same way. The effects described in the class were applied.
Inside the head section, a style tag will contain the id features. The div is given a margin and the width to be applied. The id is declared with a hash sign with it.
To apply effects on the paragraph specifically, we need to mention “p” with the id. The border above the paragraph is given with color and size. The padding-top effect is applied. This is the distance between the paragraph and the heading. The left two features are the text size and weight of the paragraph. This will be without the indented feature of the text. The heading is applied with the text-indent property of -26 pixels and padding the heading towards the left with the same value with a positive sign.
Text-indent: -26px;
Padding-left: 26px;
}
Save the code and execute the file to examine the output.
On the execution, you will see that the heading is displayed so that the second line of the heading is indented towards the left direction. However, the first line remains the same.
Note: To make the second line of the text either in the paragraph or heading indented, we need to take the value of the text-indent in a negative direction. At the same time, the padding of the text should be done in the left direction with the positive value. The user should confirm that both these values should be the same. In both examples, we have applied the same concept.
Conclusion
The CSS indent property for the second line is an essential feature of text content that is applied to the paragraphs and headings to discriminate this text from others by making the text appealing to the user. Indent values can be taken in pixels and percentages as well. This property is applied to the paragraph’s first and second lines. The text-indent of the second line feature of CSS is accomplished by having the value with a negative sign and the same value for the padding with a positive sign. The padding direction should be taken as left. We have used two examples to elaborate on this text-indent concept that will be enough to enhance your knowledge regarding the text properties.
