Heapcoding

How to position text in HTML using CSS

Published July 1, 2022

In this tutorial I shall show you how to position text in HTML using CSS. Let’s start tutorial without wasting your time.

Step 1 – Create a blank HTML document

First of all let’s create a new blank html document.

In the above screenshot you can see I have created a new blank html document.

Step 2 – Add text in the html document

Now let’s add the text in the html document.

In the above screenshot you can see that I have added text in the document.

Now let’s see the rendered text in our web browser.

In the above screenshot you can check that the text is appearing at the top left corner of the page.

Step 3 – Reposition the text using CSS

Now let’s position this text to the bottom of the page.

In the above screenshot you can see I have added some style to the paragraph.

And given the position “absolute” and arranged that in the bottom-left corner of the document.

Now let’s see the results in the web browser.

In the above screenshot you can see we have repositioned text from top-left corner to bottom-left corner of the webpage.

Congratulations you have successfully changed the position of the text in html using CSS.