HTML Unbold Text
- Different Methods to Remove Bold Styling From the Header
- Unbold Text in CSS and HTML Separately
- Unbold Text Using an Inline CSS Property
-
Unbold Text Using the
<span>Tag -
Unbold Text Using the Inline
styleProperty - Conclusion
Unbolding is the reformatting or changing of bold text or header to a non-bold typeface. There are multiple ways to help us make a header or text unbold in HTML and CSS, but in this article, we will discuss how to unbold or remove bold styling from a part of the header.
There could be different methods used to remove bold styling from the text. Let’s dive deep into it and discuss each one by one.
Different Methods to Remove Bold Styling From the Header
The following are the methods used to remove bold styling from the header and plain text in HTML and CSS.
Unbold Text in CSS and HTML Separately
To remove bold styling from a header, we need to use the <span> tag with some property. In this method, we use both CSS and HTML files.
First of all, wrap the bold text into <span> in an HTML file and assign the class to the <span> tag, then give a property name font-weight: normal to the <span> class in the CSS file.
CSS Example:
.notbold{
font-weight:normal;
}
HTML Example:
<h1>
The bold text,<span class="notbold">The unbold text</span>
</h1>
Unbold Text Using an Inline CSS Property
This method also uses the <span> tag to remove bold styling from a header. But this method did not use a separate .css file like method#1, but we can use inline CSS to remove bold styling from a header.
So to unbold a text in a header first wrap the bold text into <span> and then give style= "font-weight: normal" to a <span> tag.
HTML Example:
<h1>
This bold text, <span style="font-weight:normal">The unbold text</span>
</h1>
Unbold Text Using the <span> Tag
This method uses the <span> tag to unbold text in a header. To unbold a text, wrap the bold text into a <span> and then assign font-weight: normal to a <span> in a CSS file.
CSS Example:
span{
font-weight:normal;
}
HTML Example:
<h1>
This is bold text bold, <span>but the unbold text</span>
</h1>
Unbold Text Using the Inline style Property
To remove bold styling from the header, we can use this method’s style property. By assigning style property with font-weight:normal to <h>tags can help us in unbolding a header.
HTML Example:
<h1 style="font-weight: normal;">HTML Unbold</h1>
Code Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Unbold</title>
<style>
.notbold{
font-weight:normal;
}
span{
font-weight:normal;
}
</style>
</head>
<body>
<!--Method#1-->
<h1>
This is bold text bold, <span>but the unbold text</span>
</h1>
<!--Method#2-->
<h1>
This bold text, <span style="font-weight:normal">The unbold text</span>
</h1>
<!--Method#3-->
<h1>
This is bold text bold, <span>but the unbold text</span>
</h1>
<!--Method#4-->
<h1 style="font-weight: normal;">HTML Unbold</h1>
</body>
</html>
Output
Conclusion
To summarize this tutorial on how to remove bold styling from a header. We have discussed what is unfolding and how we can remove bold stilling from a header. Furthermore, this article has learned different methods to remove bold styling from a header.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn