Entradas


A cascading style sheet is a piece of style code that is added to the HTML tags to enhance the work and appearance of HTML contents. Among many effects of CSS, one of the fundamental properties of styling the content is to apply a style sheet to the text, including text color, family, size, and location. One of the text properties of CSS will be explained in this article. This is an indent property. Indent means the displacement of the text from a certain point to a specific place.

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. Merienda 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.

div.a {

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.

#container h2 {

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.



Source link


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.



Source link