Home » CSS » 3 Ways to Make Text Bold in CSS

3 Ways to Make Text Bold in CSS

By

In this tutorial, we will be discussing three different methods for making text bold using CSS. Whether you're new to CSS or have been working with it for a while, this tutorial will provide you with the knowledge and skills to make your text stand out on your website. So, let's get started and learn how to make text bold in CSS!

Make Text Bold in CSS Examples

In most cases, you’ll use the bold keyword to boldface a font using the font-weight property. But if you want to apply varying degrees of boldness, you can use multiples of 100.

Also, you can use inline CSS for elements and can use <b> and <strong> elements to make the text bold in a paragraph. Below are the examples:

1. Using the CSS font-weight Property in Head Section

For font-weight, you specify the number that determines the boldness of the font: normal, bold, bolder, lighter, or multiples of 100 from 100 to 900, with 400 equivalent to normal. Bolder and lighter are relative to the parent element.

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

How to Specify font-weights to Convert Text in Bold?

font-weight: 700;
font-weight: bold; /* same as 700 */
font-weight: normal; /* same as 400 */
font-weight: lighter; /* relative to the parent element */

CSS for Class in Head Section

<style>
.bold_text {
    font-weight: bold;
}
</style>

HTML

<body>
      <p class="bold_text">This full paragraph is bold.</p>
</body>

Output

This full paragraph is bold.

2. Using the <b> Element

Put the <b> element between a paragraph element to make a certain part of paragraph bold.

 HTML

<p>Some part of the <b>paragraph is bold</b>.</p>

Output

Some part of the paragraph is bold.

3. Using the <strong> Element

Make the text bold of a specific part of the paragraph using the <strong> element.

HTML

<p>Some part of the paragraph is bold <strong>using the strong element</strong>.</p>

Output

Some part of the paragraph is bold using the strong element.

Complete Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .bold_text {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>Examples: Bold Text in CSS</h1>
    <h2>Using CSS class</h2>
    <p class="bold_text">This full paragraph is bold.</p>
    <h2>Using b element</h2>
    <p>Some part of the <b>paragraph is bold</b>.</p>
    <h2>Using Strong element.</h2>
    <p>Some part of the paragraph is bold <strong>using the strong element</strong>.</p>
</body>

</html>

Output

Make text bold using CSS.

Conclusion

In conclusion, there are many ways to make text bold in CSS, but the three methods we discussed in this tutorial are some of the most commonly used. By using the CSS font-weight property, the <strong> tag, or the <b> tag, you can easily make your text stand out on your website. Remember to always test your code in multiple browsers to ensure compatibility and consistency. We hope this tutorial has been helpful in your web development journey and that you feel more confident in your ability to make text bold in CSS. Happy coding!

See also: