Indent is defined as the extra space at the start of the line. In CSS, the text-indent is defined as the extra space at the start of the first line. We use the “text-indent” property to apply the indentation on the paragraph’s first line. We set its value in “px”, “em” or also in “%”. We also set a negative value for this indent-text property. When we use this “text-indent” property of CSS, the first line of the block or paragraph will create some space at the start of the line. It will only set some space at the start of the first line and doesn’t affect other lines of the paragraph or block. It doesn’t create space on the other lines except for the first line. In this tutorial, we will use this “text-indent” property and set the negative and positive values for indentation.

Example # 1: For using this “text-indent” property in CSS, we must have s

ome block of data or paragraphs. For this, we have to the HTML file first. In this tutorial, the software we are using is the Visual Studio Code. Yocreate u may utilize any text editor or notepad for this. When we are using this software, we have to choose the language in which we are going to write the code. Here, we are selecting “HTML” as its language.

After this, we are going to start coding in this file. We also put “!” and then by pressing “Enter” we get the basic tags of the HTML which we need in all HTML codes. In the body, we are going to create some “div” classes with different names. Inside each div, we have created a paragraph using the “<p>” tag. We are creating three divs with different names as “a”, “b”, and “c”. Inside these divs, we have a paragraph. So, in this way we have created three paragraphs here. We will use these three paragraphs in all the examples in this tutorial. Now, we will go to the CSS file where we use the “text-indent” property and will apply indentation to all these paragraphs. We also linked the CSS file with this HTML file in the “head” tag of the HTML code.

We are using the “div” name “a” and then use the “text-indent” property. So, it will create an indentation on the first line of the div “a” paragraph. The first line of this paragraph creates a space at the start of the paragraph line. We are using the values in “px” in this code. We set “80px” value for the first div paragraph. So, it will create “80px” free space at the first line and manage the text accordingly. Then, we are going to indent the second div paragraph and use “b” with the “div”. Then, we are going to use the negative value in the “text-indent” property. For the second paragraph, we apply the negative indentation for setting the text to the left side.

After this, we are going to use the last paragraph and also apply the “text-indent” property for this. We set “30px” for the third paragraph of the div. So, the text of the first line of the paragraph moves to “30px” to the right side and creates a “30px” space at the starting of the first line. After completing this code, save it with the “.css” file extension and also with the name we have used in the link tag of “HTML”. Then, check the output.

In this screenshot, you can see that the first paragraph creates some space at the start of the first line only. Here, it creates an “80px” space as we have used “80px” as the value of the “text-indent” property. Now, look at the second paragraph, some texts disappear from the screen as it moves to the left side because of the “text-indent” property. It indents this paragraph “-70px” and this applies to the first line of the paragraph only. Then, comes the last paragraph where we use the “30px” value of this property. In this paragraph, it creates space of “30px” in the first line.

Example # 2:

We set the heading’s “font-family” to “Algerian” and also in “center” alignment. We set its “color” to “maroon”. Then, we have heading 2. For this heading, we are using “Times New Roman” as the “font-family” and “purple” as the “color” of the font. Now, we are going to use the “text-align” property for all divs separately. First, we have the “div.a” and we are setting the “text-indent” property values in “em”. Here, “10em” is set for the first div paragraph and for the second div, we are using a negative value as “-5em”. And for the last div, we set the “text-indent” value to “2em”.

The first line of the first paragraph is indented “10em” to the right side,which means it creates a “10em” space in the first line of the first paragraph. Then, it applies a negative value to the second paragraph and moves the first line of the second paragraph to the left side. So, some text does not appear here. And at the first line of the third paragraph, we use “2em” text indentation, so it creates a “2em” space or indentation in the first line.

Example # 3:

We are going to style the heading here, with the “font-family” set to “Algerian” and align to the “center”.  Its color is adjusted here to “orange”. Then, there is heading 2, which is set to “Calibri” as the “font-family” and “green” as the font’s “color.” Now, we are using the “text-align” property for each div individually. First, we have “div.a,” and we’re using the percentage “%” to set the “text-indent” property values. For the first div paragraph, we use a positive value of “20%” and for the second div, we use a negative value of “-10%”. The “text-indent” value for the final div was set to “40%”

The first paragraph’s first line applies a “20%” indentation which implies it produces a “20%” indentation in the first paragraph’s first line. The second paragraph is then given a negative value and the initial line of the second paragraph is moved to the left side preventing some text from appearing. The first line of the second paragraph moves “10%” to the left. We also utilize “40%” text indentation on the first line of the third paragraph which results in a “10%” space or indentation on the first line.

Example # 4:

Set the font-family to “Algerian” and “center” in this heading. Its color is changed to “red” in this case. Then we also have heading 2, which has “Calibri” as the “font-family” and “blue” as the “color” of the heading. Now, we use the “text-align” attribute for each div separately. First, we use the “div. a,” and we’re setting the “text-indent” property values with the pixel to “50px”. For the second paragraph, we set the value of “text-indent” in “em” and also negative. We use “-3em” for the second div paragraph. For the last div paragraph, we set the value in “%”. We set “30%” for the last paragraph. In this code, we use “px”, “em”, and also “%”.

In the first paragraph, we use “50px” in the screenshot. It adjusts the “50px” indentation. In the second paragraph, we set the negative value in “em” which is “-3em”. The first line is indented to the left side. For the last paragraph, we set the value in “%” which is “30%” and you can see that it indents the first line of the third paragraph to the right side.

Conclusion:

We have created this tutorial to elaborate on the “text-indent” in CSS. Here, we have discussed what is text-indent and how to set the indentation in CSS, and which property of CSS we have used for indenting the text. As we have discussed in this tutorial, the “text-indent” property is used for applying indentation to our text and we have used negative as well as positive values here in our examples. This property has indented the paragraph’s first line only.