CSS
Correct CSS Syntax to Make All
Elements Bold
Want to make all the paragraphs on your website stand out with bold text? You can easily achieve this using CSS. Whether you’re applying it globally or within a specific section of your site, CSS provides a simple and clean syntax for styling all <p> elements at once.
In this blog, we’ll show you the correct syntax and a few variations to give you full control over your paragraph styling.
✅ The Correct CSS Syntax
To make all <p> elements bold, use the font-weight property with the value bold.
📌 Example:
p {
font-weight: bold;
}
This rule selects every <p> element in your HTML and makes the text bold.
💡 Example HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>This paragraph will be bold.</p>
<p>So will this one!</p>
</body>
</html>
✅ Output: All paragraph text on the page appears bold.
🎨 Additional Styling (Optional)
You can combine font-weight: bold with other styles for more visual emphasis:
p {
font-weight: bold;
color: darkblue;
font-size: 18px;
}
🧠 CSS Tips for Bold Text
| Property | Description |
|---|---|
font-weight | Controls how thick or thin text appears |
font-weight: bold | Shorthand for font-weight: 700 |
font-weight: normal | Resets to default (usually 400) |
You can also use numeric values:
p {
font-weight: 600; /* Semi-bold */
}
✅ Summary
| Goal | CSS Syntax |
|---|---|
Make all <p> bold | p { font-weight: bold; } |
| Semi-bold paragraphs | p { font-weight: 600; } |
| Reset to normal | p { font-weight: normal; } |
🏁 Final Thoughts
Making all <p> elements bold in CSS is as simple as using the selector p and setting font-weight: bold. It’s a foundational skill in web design, and mastering it helps you take control over your page’s typography with precision.
Whether you’re creating a blog, landing page, or app UI, controlling text weight with CSS ensures a clean, readable design.