In this post, I will show you how to unbold text on an HTML document. And this text could be a paragraph, heading, or part of them.
You’ll also see how to do it only by editing an HTML file and also writing additional CSS.
Let’s get started.
How to unbold text in HTML documents
The font-weight CSS property is responsible for making certain text bold, bolder, lighter, normal, etc. Aside from these values (normal, bold, lighter, etc), the font-weight property also accepts numeric values such as 100, 300, 700, etc. However, these numeric values also depend on the font families.
Generally, CSS font-weight bold, bolder, 600, and 700+ makes a font heavy.
So, to make a font unbold, you have to replace the existing weight with normal. Also, you can use a numeric value such as 400. Look at the following CSS as a reference:
font-weight: normal;
/* OR */
font-weight: 400;How can you implement this CSS directly into the HTML file?
You have to write the CSS either inline or embed method if you want to do it in the HTML file. Below I have given you some samples of the inline method.
Inline style method
<p style="font-weight: normal;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor <span style="font-weight: normal;">sit amet consectetur</span> adipisicing elit.</p>
<h2 style="font-weight: normal">Sit amet consectetur adipisicing elit laboriosam laborum.</h2>As you see in the above HTML, I have a style as the attribute and the actual CSS inside it. It’s called inline CSS and this is how you can unbold text or heading or any other HTML tags.
Embed style method
You can also write the CSS in the embed method like the following:
<style>
p {font-weight: normal;}
p span {font-weight: normal;}
h2 {font-weight: normal;}
</style>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor <span>sit amet consectetur</span> adipisicing elit.</p>
<h2>Sit amet consectetur adipisicing elit laboriosam laborum.</h2>The above example is the same as the previous one and they have the same effect/output.
External CSS/style method
This is one of the most popular and easy-to-manage ways of writing CSS in a different file.
To use this type of approach, create a style.css file in your project folder and link this file to your HTML using the following line.
<link rel="stylesheet" href="style.css">You can write the above line anywhere in between the <head> tag.
Now open the style.css file and write CSS. All the styles will be applied to the HTML document using the above link.
In your style.css file, write the following CSS:
p {font-weight: normal;}
p span {font-weight: normal;}
h2 {font-weight: normal;}It’s the same as the previous two examples.
Troubleshoot the font weight
font-weight: normal or font-weight: 400 may not always work because of CSS specificity. If you don’t know about the specificity, see the following two articles:
If you see that your changes are not working, try making higher specificity by using multiple CSS selectors. CSS class selectors have higher specificity than tag selectors. IDs have higher specificity than classes. You can also combine multiple selectors as I mentioned in the multiple CSS selectors.
Understanding specificity through examples
Even though the ID has a higher specificity than a class. But it does not mean that IDs will always win. There are other factors involved in this specificity. For example, the closest ancestor will win over a remote ancestor (container) even if the remote ancestor has an ID.
I know it is intimidating and hard to grasp. Let me give you another example with HTML & CSS which will make more sense.
Please take a look at the following HTML:
<div id="banana">
<div class="apple">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> <!-- .apple -->
</div> <!-- .banana -->Think of a situation where you have to overwrite CSS for the paragraph (<p>) tag. The paragraph has the closest ancestor div with a class named .apple. It also has another level remote ancestor div that has an ID of #banana.
Now my question to you. Can you imagine which is the highest specificity for the paragraph tag based on the above HTML markup?
If you can, kudos to you. But if you can’t, don’t worry. I have solved it and written all the selectors below.
In the following example, I explained the specificity from the lowest to the highest. Make sure your solution matches mine.
/* Specificity - from lowest to the highest */
#banana { /* lowest */
font-weight: bold;
}
.apple {
font-weight: bold;
}
#banana .apple {
font-weight: bold;
}
p {
font-weight: bold;
}
.apple p {
font-weight: bold;
}
#banana p {
font-weight: bold;
}
#banana .apple p { /* highest */
font-weight: normal;
}In this example, #banana .apple p is the winner and the font-weight will be normal even though the rest of the selectors have a font-weight: bold.
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Build HTML CSS projects
Conclusion
CSS font-weight property handles the weight of a font or text. A font-weight of normal or 400 can make an existing text unbold.
Sometimes only the font-weight may not replace an existing value because of the specificity. In this type of case, you have to make a higher specificity than the existing one. The higher/highest specificity will always win.
