Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set indent the second line of paragraph using CSS?
HTML is used to create the structure of a web page. Additionally, CSS is used to style the visual appearance of those pages. In CSS, Indenting is one of the important aspects of the formatting text on the web pages. It allows developers to create the visual effects at the beginning of a paragraph. Indenting can be used to make the text easier to read and to create a sense of structure within a document.
Indenting in CSS
CSS is a powerful tool that allows developers to control the visual presentation of HTML elements on the web page. We can style the text, and change its font, size, color, and even its indentation using CSS.
In CSS, indentation is used to create a visual separation between elements. It creates a visual separation between elements by adding space or padding to the left or right side of an element.
Syntax
css selector {
text-indent: value;
}
Using Text-Indent Property for First-Line Indentation
CSS allows developers to indent the first line of a paragraph by using the text-indent property. This property is already set to 0, which means no indentation on the property. For example, if we want to indent 25 pixels all paragraphs on the web page we can use the following code −
p {
text-indent: 25px;
}
Example 1
Here is an example to set a 25px indent to all paragraphs on the web page.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: 35px;
}
</style>
</head>
<body>
<h2>This is an example of a text-indent property</h2>
<p>This is the first indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>This is a second indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>This is the nth indented paragraph, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
How to Indent the Second Line of Paragraphs?
The "text-indent" property is used to indent the first line of a paragraph. Whereas to indent the second line of a paragraph, first we have to remove the indentation of the first line. To do this, we can use a negative value for "text-indent" to move the first line to the left, after that, we use a positive value for "padding-left" to move the second line to the right. For example −
p {
text-indent: -20px;
padding-left: 20px;
}
In the above code, we have indented the first line of the paragraph by -20px which will move it -20px to the left, while the second line is indented by 20px which will move it back to the right.
Let’s look at some examples to indent the second line of paragraph using CSS.
Example 2
Here is an example to set the indent second line of Paragraph using the CSS element
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: -30px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2>Indent Second Line of Paragraph</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Example 3
Here is an example to set the indent second line of Paragraph using the CSS class selector.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
.indent-p {
text-indent: -4em;
padding-left: 4em;
}
</style>
</head>
<body>
<h2>Indent Second Line of Paragraph using CSS class selector</h2>
<p class="indent-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Conclusion
Here, we have discussed Indenting in the second line of a paragraph. It is an easy way to improve the readability and appearance of the web page. By using the "text-indent" property, we can create a unique and visually appealing look that will make the content stand out.
1K+ Views
