HTML <p> Tag
Last Updated :
23 Jan, 2024
HTML <p> tag defines the paragraph and is used to give structure to text content within a webpage. It is a block-level element & used to add the space or margins after and before the element this is done by browsers by default.
Note: The HTML <p> tag supports the Global Attributes and Event Attributes.
Syntax
<p> This is paragraph element </p>
Example
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML p Tag</title>
</head>
<body>
<h2>HTML p Tag</h2>
<p>Welcome to GeeksforGeeks</p>
<p>A computer science portal for geeks</p>
</body>
</html>
|
Output:
Custom CSS to Paragraph
We can give the style to the paragraph with internal, external or inline CSS styling. Here we have used CSS internal styling for defining the text color to green, font-size and the font-weight.
Example: The example shows how to apply CSS styling to the paragraph.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML paragraph tag </title>
<style>
p {
color: green;
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<p>This is paragraph element</p>
</body>
</html>
|
Output:
Align Paragraph
The HTML <p> can be aligned with the CSS property text- align.
Example: The example shows how to apply CSS styling to the paragraph with text align.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML paragraph tag</title>
<style>
p {
color: green;
font-size: 30px;
font-weight: 700;
text-align: center;
background-color: rgb(186, 218, 186);
}
</style>
</head>
<body>
<p>This is paragraph element</p>
</body>
</html>
|
Output:
Browser’s Default CSS
The browser provides its default CSS style to the <p> element. The default style used by the browser is defined within the style tag in the below example.
Example: The example shows the paragraph with the Browser’s Default CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML paragraph tag</title>
<style>
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
</style>
</head>
<body>
<p>
This is paragraph element with
browser's default styling
</p>
</body>
</html>
|
Output: Its display simple output on browser screen.
This is paragraph element with browser's default styling
Supported Browsers
- Chrome 1
- Edge 12
- Safari 1
- Firefox 1
- Opera 15
Share your thoughts in the comments
Please Login to comment...