The <p> tag in HTML is used to define a paragraph of text. It automatically adds space before and after the content, making the text easier to read and well-structured.
- The <p> tag is a block-level element used for displaying text in separate paragraphs.
- Browsers automatically add line breaks and spacing before and after each <p> tag.
<!DOCTYPE html>
<html>
<body>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
Note: The HTML <p> tag supports the Global Attributes and Event Attributes.
Styling Paragraphs with CSS
You can style paragraphs using inline, internal, or external CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: green;
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<p>This is paragraph element</p>
</body>
</html>
color:green;changes the text color to green.font-size: 30px;sets the size of the text.font-weight:700;makes the text bold.- This paragraph uses internal CSS, which is written inside the
<style>tag in the<head>section.
Aligning Paragraph
The HTML <p> can be aligned with the CSS property text- align.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-align: center;">This is paragraph element</p>
</body>
</html>
text-align: center;centers the paragraph text.
Browser's Default CSS
Browsers automatically apply default styles to <p> elements. This usually includes top and bottom margins, which create space between paragraphs. You can override these defaults using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
margin: 0;
}
</style>
</head>
<body>
<p>No default margin here.</p>
</body>
</html>
- Browsers automatically add top and bottom margins to paragraphs.
- Using
margin: 0;removes this default spacing.