Styling HTML Paragraphs with CSS
The HTML <p> element represents a paragraph. Use CSS for its visual presentation: margins, line height, width, color, background and other styles.
Paragraph spacing Top ↑
p {
margin-block: 0 1rem;
}Prefer margins or layout gap for spacing between paragraphs instead of inserting repeated <br> elements.
Line height and readable width Top ↑
.article p {
line-height: 1.65;
max-width: 70ch;
}Text alignment Top ↑
.intro { text-align: center; }Long body text is usually easiest to read when aligned naturally for the writing direction rather than fully justified or centered.
Decorative paragraph styles Top ↑
.callout {
padding: 1rem;
background: #eef6ff;
border-left: 4px solid #0d6efd;
}A visual callout can still be a paragraph when it is a paragraph. For more complex grouped content, choose a more appropriate container such as <div>, <aside> or a semantic section.
Frequently Asked Questions Top ↑
Should I use <br> to make space after a paragraph?
No. Use CSS margin for layout spacing.
Can a paragraph have a background?
Yes. background-color and other box properties apply normally.
What controls the space between lines?
The CSS line-height property.
HTML paragraphs Buttons and links
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
