How to Make an HTML Paragraph in a Specific Location
HTML marks up text into Web page content, which you can style using Cascading Style Sheets (CSS). Paragraphs in HTML show up on Web pages depending where you place them in the code, so if your code contains a heading, a paragraph and then some photos, those items will display on the page in that same order. You can change the position of a paragraph to a specific location on the page using absolute positioning in a style sheet.
Other People Are Reading
Instructions
-
-
1
Open your Web page in Notepad or a code editor. Add a paragraph to the page, putting it in a logical place such as under a related heading:
<p id=”myparagraph”>This is an HTML paragraph.</p>
Give your paragraph a unique, meaningful ID as shown above. You will use this ID to position the paragraph in your CSS code.
-
2
Find the “<style>” tags in your HTML code or add them:
<style type=”text/css”>
</style>These tags go between the “<head>” tags of your HTML, usually below the “<title>” tags. All of your CSS code will go between the “<style>” tags.
-
-
3
Write a style rule for your paragraph and set its “position” property to “absolute.” Set the “top” and “left” positions using pixels or percentage values:
#myparagraph {
position: absolute;
top: 200px;
left: 300px;
}When using percentage values, remember that the paragraph will change position on the screen depending on the screen size.
-
1
Tips & Warnings
Find the tags that surround your paragraph tags, such as “<div>”, and set them to “position: relative” in your CSS code. This will keep the paragraph inside its parent element.
