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