CSS HTML

Inserting a first-line indent with CSS

January 28, 2022

Inserting a first-line indent with CSS

In this article, we’ll learn how to insert a first-line indent with CSS, like we see in books or when writing an essay for example.

first-line indent with CSS cover

Hey you  programmer, okay? Let’s learn something new!

Layout needs that aren’t common can become  a challenge, like the first line indent issue

But for our delight (haha), there is a CSS rule that solves exactly this problem

Its name is text-indent, and then we must add a value for the indent

Which can be in px, in or even %

So that we can handle this indentation the way we need to, let’s look at a practical example:

<!DOCTYPE html>
<html>
 <head>
  <title>Como inserir um recuo de primeira linha com CSS</title>
  <meta charset="utf-8">
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis eu sem non varius. Integer ac scelerisque turpis. Nunc nec interdum nisl. Nunc varius auctor neque at laoreet. Aliquam mattis, ipsum in luctus pellentesque, libero augue fringilla eros, in auctor odio ex a tortor. Nullam viverra, nisi tristique luctus cursus, lectus ligula lacinia urna, a mattis quam mi eu nisl. Nunc ac arcu nec nisl pharetra tincidunt. Morbi pharetra quam quis quam rhoncus elementum. Quisque nulla orci, suscipit sed ornare consectetur, faucibus eleifend quam. Quisque vitae justo elementum lectus feugiat venenatis. Nam leo sapien, suscipit ut eros sit amet, auctor egestas mauris. Pellentesque euismod odio in sapien tincidunt, ut fringilla leo lobortis. </p>
 </body>
</html>

We have a basic HTML, with big text and we need to add the indentation, let’s go to CSS:

p {
 width: 500px;
 text-indent: 2em;
}

We added a width, just to give the effect of many lines, which happens in real life

Then we use the text-indent property with a value of 2em (indentation width), which will give the indentation on our page

See the result:

Note that indentation has been applied! 😀

Remembering that manipulating the text-indent value, you can have a greater or lesser indentation

Conclusion

In this article we learned how to insert a first line indent with CSS on our web pages

To do this, we simply use the text-indent property, which takes a value that is precisely the indentation size

Thus being able to manipulate this indentation in any way you need

Want to learn more about HTML and CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x