What are paragraph elements?

Paragraph elements are used to create paragraph texts for writing content on a webpage or site.

What element is used for paragraphs?

We use this html element <p></p> to make a paragraph, and everything that is written between those two tags becomes a paragraph on your webpage.
You can put words, content or text on a webpage so that users can read comfortably.
This is just a way to hold your words together so that people can read your words, like telling a story or teaching people something new.


Example paragraph element HTML code

HTML code


<p>


This is a paragraph element.


</p>

Editor

Why do we need a paragraph element on a webpage?

This element is very useful and it is needed because it helps organize text into readable parts or sections.
Without it all the text on a webpage would appear in one long line, and it will make it difficult for people or users to read nicely.Each paragraph can have a different idea, a different look or a piece of new information.
The browser will automatically see this element and add spacing or margin before and after it, making the webpage neat and readable without adding any extra line of code.


How do you style a paragraph element with Css?

They are two methods you can use to style a paragraph for styling with Css.Method number one you can connect or link your HTML document to a Css file using the link element and we use this attribute class="css-class-name", to assign a class name so that you can style your element with css.This method is useful when you have a big project and want to keep everything organized.
Method number two you can write Css style inside your HTML document, this is useful when you have a small project.

1. Method number one

How to link a Css file using the link element?

When you want to link a Css file we use this element <link>, it doesn't have an end tag and you can put a / inside the start tag like this <link/>.This element is mostly used to connect stylesheets, icons or other files that helps define how a webpage looks and reacts.
We then use this attribute href= "Css file.css" to specify the url or the external resources you want to link to, like your Css file for styling your webpage.
We also use this attribute rel= "stylesheet" to tell the browser that this is a linked stylesheet file that should be applied to the webpage.

Example HTML code

HTML code


<!DOCTYPE>


<html>


<head>


<title>Title of your webpage</title>


<link rel="stylesheet" href= "style.css">


</head>


<body>


<p class="css-class-name"> Hello world </p>


</body>


</html>

Editor

You must place the link HTML element between this two elements <head></head> on every single webpage for Css styling.

2. Method number two

If you want to style your webpage inside an HTML document we use this element <style></style>, and everything that is written between those two tags becomes your Css code for styling your webpage.


<style> Css code goes here...</style>


HTML quick quiz

What is the correct syntax for a paragraph element?





HTML quiz



Full example HTML code using the paragraph element

HTML code


<!DOCTYPE html>

<html>

<head>

<title>

This is the title of your webpage


</title>

</head>

<body>

<p>

We use this element here.


</p>

</body>



</html>
Editor