Press "Enter" to skip to content

HTML: 3 Ways to Make Text Bold in CSS

In this tutorial, you will learn to make the text bold in CSS using 3 ways.

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.

Syntax for font-weight

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

How to Specify font-weights

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: Make Text Bold 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

As shown in the featured image of this article.

See also: