How to Unbold Text in HTML?

How to Unbold Text in HTML?

In CSS, font-weight: normal property is used for unbolding text.

CSS :-

	font-weight: normal 

How to Unbold Text with Class Styles CSS?

Classes can be used to define a style & apply it to multiple elements on a web page.

In this example, we will define a class that will unbold the text for an H1 element.

This class can be used by other elements like p, span as well.

CSS :-

	.unbold {
		font-weight: normal;
	} 

HTML :-

	<h1 class="unbold">This text will appear Unbold.</h1>
	<h1>This text will appear Bold.</h1> 

Result :-

In CSS code, we have created a class named as .unbold.

font-weight property is defined within the class with value as normal.

In HTML code, the First h1 element is applied with the class whereas the second h1 element has been given no class.

In the Result image, First h1 can be seen as Unbold & Second h1 is seen as Bold as per its default behaviour.

How to Unbold Text with span?

span elements can be used to Unbold text for specific words in a sentence.

We have to wrap the selected words with span element to make them unbold.

In this example, we will use the span style to unbold a particular group of words in a sentence.

CSS :-

	span {
		font-weight: normal;
	} 

HTML :-

	<h1>This text will appear bold. <span class="span">But not this.</span></h1> 

Result :-

In CSS code, We have applied the style to the span element directly.

This style will be applied to all the span elements within the web page.

In HTML code, span has been applied for particular words within an h1 element.

Text within the span element will display Unbold because of the CSS applied to it.

How to Unbold Text with Inline CSS?

We can also apply the styles directly within the html elements.

This style will be applied only to a single element.

Inline CSS is helpful in minor & limited CSS changes.

HTML :-

	<h1 style="font-weight: normal;">This text will appear Unbold.</h1> 

Result :-

Summary

We assume you have learned the method of Unbolding the text in HTML.

Unbolding text can be done from various ways. You can choose the option that suits your needs.

Best preference is to create a class style & apply it to the required elements.