When it comes to styling elements on a webpage, CSS gives us a wide range of options to choose from. One of the most common tasks is adding bold weight to text. In this article, I’ll guide you through different ways to achieve a bolder look using CSS.
Using the font-weight Property
The most straightforward way to add bold weight to text is by using the font-weight property. This property accepts a numeric value ranging from 100 to 900, with 400 being the default value for normal text, and 700 for bold text.
Let’s take a look at an example:
p {
font-weight: bold;
}
By applying this CSS to a <p> element, the text inside will appear in bold.
Using Font Weights Between 100 and 500
What’s interesting is that the font-weight property doesn’t limit us to just two weights—normal and bold. We can actually use values between 100 and 500 to achieve different levels of boldness. These intermediate values provide a subtle variation in appearance.
For instance, if we set the value to 200:
p {
font-weight: 200;
}
The text will have a lighter bold style compared to the default bold value.
Using Font Weights Above 500
On the other hand, if we go beyond the 500 threshold, the text will become even bolder. Values between 500 and 900 offer a more significant difference in weight.
For example, let’s set it to 800:
p {
font-weight: 800;
}
The text will now appear much thicker and more prominent.
Using the <strong> Tag
While the font-weight property is the standard way to add bold weight, there is an alternative method that also achieves the same result. This method involves using the <strong> HTML tag.
The <strong> tag is a semantic element used to indicate important or emphasized text. By default, browsers render the <strong> tag’s content in bold.
Here’s an example:
<p>This is a <strong>strong</strong> statement.</p>
The word “strong” in the above example will be displayed in bold.
Conclusion
In this article, we explored different methods to add bold weight to text using CSS. The font-weight property allows us to adjust the weight of text, while the <strong> HTML tag provides a semantic way to emphasize important content. By understanding these techniques, you’ll have more control over the visual presentation of your webpages.