- Trending Categories
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 indent text in HTML by using CSS?
HTML, Hyper Text Markup Language, is used to create the structure of a web page. Additionally, CSS is a style sheet language that is used to style the visual appearance of those pages.
Indenting is one of the important aspects of the formatting text on the web pages because it allows to create a visual offset at the beginning of a paragraph. or block of the text. Indenting can be used to make text easier to read and to create a sense of structure within a document.
Indenting in CSS
CSS or Cascading Style Sheets is a powerful tool that allows us to control the visual presentation of HTML elements on the web page. Using CSS, we can style the text, change its font, size, color, and even its indentation.
In CSS, Indentation creates a visual separation between elements by adding space or padding to the left or right side of an element. It helps to improve the readability and structure of a webpage by creating a clear separation between different sections or blocks of content.
There are several ways to indent text in HTML using CSS. Here, we will discuss two common methods.
Approach 1: Using the text-indent property
Approach 2: Using padding-left property
Approach 1: Using the text-indent property
The text-indent property is used to create a horizontal space at the beginning of the first line of text within an element. It is commonly used to create an indented paragraph or to separate a block of text from the surrounding content. The value for text-indent can be specified in pixels, ems, or as a percentage of the containing element's width.
Syntax
Following is the syntax to indent text in HTML using CSS −
css selector {
text-indent: value;
}
Example
Here is an example to indent text in HTML by using text-indent property. In this example, we will indent the first line of selected paragraphs by 2em.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-align: center;
}
.indented-p {
text-indent: 2em;
}
</style>
</head>
<body>
<h3>This is an example of a text-indent property.</h3>
<p class="indented-p">This is an 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 simple 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>
</body>
</html>
Approach 2: Using padding-left property
The padding-left property is used to create space between the left edge of an element and its content. It is commonly used to create an indented block of text, such as a bullet list or a blockquote. The value for padding-left can be specified in pixels, ems, or as a percentage of the containing element's width.
Syntax
css selector {
padding-left: value;
}
Example
Here is an example to indent text in HTML by using padding-left property. In this example, the padding-left property will be used to add 40 pixels of space to the left side of the paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-align: center;
}
.indented-p {
padding-left: 40px;
}
</style>
</head>
<body>
<h3>This is an example of a padding-left property.</h3>
<p class="indented-p">This is an 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 simple 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>
</body>
</html>
Conclusion
Indentation is an important aspect of text formatting in web development. With CSS, we can easily indent text in HTML by using the text-indent or padding-left property. Both methods are effective and can be used depending on the specific needs of the website.
219 Views
