Changing Bold Text into Normal (Unbold Text) in HTML

# Table of Contents

# Changing Bold Text into Normal (Unbold Text) in HTML

The easiest way to change bold text into normal (unbold text) in HTML is to:

Wrap the text in a span element.
Set a not-bold class on the span element.
The not-bold class should set the font-weight CSS property to normal.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

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

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

  <body>
    <p class="title">
      Bold text first.
      <span class="not-bold">Then normal text.</span>
    </p>

    <br />
    <p>bobbyhadz.com</p>
  </body>
</html>

unbold text html

The code for this article is available on GitHub

We set the title class on the p element.

The title class sets the font-weight CSS property of the paragraph to bold.

style.css

Copied!
.title {
  font-weight: bold;
}

The font-weight property sets the weight (or boldness) of the font.

The bold value is the same as 700 (bold font).

We wrapped a part of the p element into a span to change the bold text into normal.

style.css

Copied!
.not-bold {
  font-weight: normal;
}

The not-bold class sets the font-weight CSS property to normal, which is the same as 400 (not bold font).

# Unbold text in HTML using inline styles

You can also use inline styles to unbold text in HTML.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

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

  <body>
    <p class="title">
      Bold text first.
      <span style="font-weight: normal">Then normal text.</span>
    </p>

    <br />
    <p>bobbyhadz.com</p>
  </body>
</html>

The code for this article is available on GitHub

The code sample produces the same output as in the previous subheading.

unbold text using inline styles

Instead of using a class to set the font-weight property of the span element to normal, we used an inline style.

index.html

Copied!
<span style="font-weight: normal">
  Then normal text.
</span>

Inline styles have higher precedence than classes, so the following would work as well.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

      .title {
        font-weight: bold;
      }

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

  <body>
    <p class="title">
      Bold text first.
      <span class="bold" style="font-weight: normal"
        >Then normal text.</span
      >
    </p>

    <br />
    <p>bobbyhadz.com</p>
  </body>
</html>

inline style overrides global style

The code for this article is available on GitHub

The span element has a bold class which sets the font-weight CSS property on the element to bold.

However, we set the font-weight property to normal using an inline style, so the inline style overrides the global style.

# Unbold text in HTML using an external stylesheet

You can also use an external CSS file to unbold text in HTML.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <p class="title">
      Bold text first.
      <span class="not-bold">Then normal text.</span>
    </p>

    <br />
    <p>bobbyhadz.com</p>
  </body>
</html>

And here is the related CSS code.

style.css

Copied!
.title {
  font-weight: bold;
}

.not-bold {
  font-weight: normal;
}

The code sample produces the same output.

unbold text using external stylesheet

The code for this article is available on GitHub

The benefit of using an external .css file is that you separate your markup (HTML) from your styles (CSS).

However, as we saw in the previous subheading inline styles have a higher precedence than global styles.

Suppose you have the following HTML.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <p class="title">
      Bold text first.
      <span class="not-bold" style="font-weight: bold"
        >Then normal text.</span
      >
    </p>

    <br />
    <p>bobbyhadz.com</p>
  </body>
</html>

The code for this article is available on GitHub

Notice that the span element sets the font-weight CSS property to bold using an inline style.

The following CSS wouldn't change the bold text to normal.

style.css

Copied!
.title {
  font-weight: bold;
}

.not-bold {
  font-weight: normal;
}

text not changed to normal

If you don't have a way to change the inline style, you have to use the !important flag.

style.css

Copied!
.title {
  font-weight: bold;
}

.not-bold {
  font-weight: normal !important;
}

inline style overrides global style

The !important flag comes after the value of the CSS property and makes it so the style has higher precedence than the inline style.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Changing Bold Text into Normal (Unbold Text) in HTML

# Table of Contents