How to Indent Text with CSS

Introduction

Indenting text in CSS is a simple way to create a structured and readable layout, especially in paragraphs. The text-indent property allows you to control the indentation of the first line of a block of text.

In this tutorial, you'll learn how to indent text using the text-indent property in CSS.

Problem Statement

Create a CSS code that:

Indents the first line of a paragraph using the text-indent property.
Demonstrates how to apply different values for indentation, using pixels and percentages.

Example:

Input: A paragraph element with the text "Indented Text Example".
Output: The first line of the paragraph is indented based on the applied CSS.

Solution Steps

Use text-indent Property: Apply the text-indent property to control the indentation of the first line of text.
Apply Different Units: Use values in pixels and percentages to achieve different indentation levels.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Indent Example</title>
    <style>
        /* Step 1: Indent the first line using pixels */
        .indent-px {
            text-indent: 50px;
        }

        /* Step 2: Indent the first line using percentage */
        .indent-percent {
            text-indent: 10%;
        }
    </style>
</head>
<body>

    <p class="indent-px">This paragraph's first line is indented by 50 pixels. Text indentation helps to distinguish paragraphs and improve readability.</p>
    
    <p class="indent-percent">This paragraph's first line is indented by 10% of its container width. You can use percentages for responsive design.</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Indent the First Line Using Pixels

To indent the first line of text by a fixed number of pixels, use this CSS:
```
.indent-px {
    text-indent: 50px;
}
```

Step 2: Indent the First Line Using Percentage

To indent the first line by a percentage of the container's width, use this CSS:
```
.indent-percent {
    text-indent: 10%;
}
```

Conclusion

Indenting text in CSS is easy using the text-indent property. You can apply different units like pixels or percentages to adjust the indentation based on your design needs. This technique helps improve text structure and readability, especially in longer paragraphs.

Java Guides

Search This Blog