In this post, I will show you 3 different ways to make text bold in HTML. End of this post, I will also show you how to do it in CSS.
Let’s get started.
Make text bold in HTML
There are different HTML tags that you can use to bold certain words or sentences. Let me show you all of them.
Using strong tag
To make text bold in HTML use the <strong>
tag as you see below.
<p>Repudiandae dolores <strong>molestias necessitatibus</strong> soluta eveniet magnam mollitia</p>
Here is the output below:
Repudiandae dolores molestias necessitatibus soluta eveniet magnam mollitia
Using b tag
To make a text bold, you can also use the <b>
tag. See the syntax below.
<p>Consequatur minima <b>perspiciatis inventore</b> maxime aperiam adipisci.</p>
See the output below.
Consequatur minima perspiciatis inventore maxime aperiam adipisci.
Using inline style
You can write inline style to make certain text bold in HTML. This method becomes handy when you need to overwrite uncaught styles.
See the example and syntax below.
<p style="font-weight: bold;">Amet consectetur dipisicing</p>
<p style="font-weight: 700;">Amet consectetur dipisicing</p>
<p style="font-weight: bolder;">Amet consectetur dipisicing</p>
<p>Amet consectetur <span style="font-weight: bolder;">dipisicing elitamet</span> tempora perferendis</p>
An alternative way to make text bold
Bonus tip: You’re just not limited to inline style, strong, or b tag. The most preferred and efficient way to make a text blog is by using external CSS.
This post is all about making text bold in HTML. But this alternative approach may help some of you.
Let’s see how you can do that.
strong, b {
font-weight: bold; /* For regular bold pattern */
font-weight: 900; /* For specific/900 font-weight */
}
.bold {
font-weight: 700;
/* or */
font-weight: bold;
}
#bold {
font-weight: 700;
/* or */
font-weight: bold;
}
On your stylesheet, you can define the font weight. And even you can create a custom CSS class or ID and assign its font weight to bold. This way, you can use the same class or ID over & over throughout your project.
To use this external CSS method, you need to connect the stylesheet with your HTML file. If you need help, see how to do it.
And it brings me to the end of this post.
Learn & practice CSS with real-world examples |
---|
Learn basic CSS from the ground up. |
Build real projects in HTML CSS. |
Build HTML CSS projects
Conclusion
This is fairly a quick & short post. I gave you examples and showed you the syntaxes. And also I explained the best (alternative) way to write CSS.
If you have any questions, please let me know.