CSS Font-Weight Property
Table of Contents
Introduction
Do you know how do you make the text bold in CSS for attractive and important word marking? You too can make a word or sentence bold, but it takes a little practice to do that. If you’re new to CSS or interested to learn more about that text bold, read on to find out what they are and how to use them. You can make the font bold in both CSS and HTML, but we are going to see how to make the CSS font bold. You can make the font bold using the <B> or <strong> tag in HTML and using the font-weight property in CSS.
How do you make the text bold in CSS
What if we want to display the HTML element bold without using an HTML tag how do we do that of course we can take the help of CSS Properties. CSS properties also help us to perform formatting or styling, one of the important CSS properties that allow us to display text in bold is the font-weight property. CSS font-weight property is used to specify the boldness of the font or text. There are various values we can assign to the CSS font-weight property.
Example:
<p style="font-weight: normal;"> This font is normal. </p>
<p style="font-weight: bold;"> This font is bold. </p>
<p style="font-weight: lighter;"> This font is lighter. </p>
<p style="font-weight: bolder;">This font is bolder. </p>
<p style="font-weight: 100;"> This font is 100 weight. </p>
<!-- 100 TO 900 -->
<p style="font-weight: 900;"> This font is 900 weight. </p>
Values: normal | lighter | bold | bolder | 100 to 900 weights
You can use various values that are lighter, bold, or bolder and you can also give font-weight values of 100 to 900, 100 is lighter whereas 900 is very bolder.
Using Normalize to font-weight
The font-weight properties sometimes, we use to normalize also. For example, I don’t want the <B> tag to make the text bold, simply what I can do is. I can tell to the browser locate any <B> tag on this page then, I give the font-weight value as normal. As you can see every <B> tag is changing into normal.
<HTML>
<head>
<title>Font-Weight Property</title>
<style type="text/css">
b{
font-weight: normal;
}
</style>
</head>
<body>
<b>Hello</b>
<b>Everyone</b>
</body>
</html>
How do you make the Button text bold in CSS
<button style=”font-weight: bold;”>Click Here</button>
You can give value using the font-weight style property just like you would normally give a <span> or <p>paragraph tag.
Text bold on hover CSS
<html>
<head>
<title>Font-Weight Property</title>
</head>
<style type="text/css">
a:hover{
font-weight: bolder;
}
</style>
<body>
<a href="https://wonderdevelop.com">Click here</a>
</body>
</html>
How do you make the Link text bold in CSS
<a href=”https://wonderdevelop.com” style=”font-weight: bold;” >Click here</a>
If you create a link with the font-weight properties in CSS, the font will be bold when viewing the link, but the font weight will be normal when hovering. If you want the font to be bold when you hover over the link, you need to create a font-weight property on the hover
Bold vs Bolder
Most browsers do not exactly support the bold and bolder font-weight variations, so they look visually identical.
| Bold value | Bolder value |
| Bold is individual font-weight. | Bolder is a relative font-weight. |
| The values are not inherited from parents | The values select the font-weight relative to the weight inherited from the parent. |
Inline & block font bold
<span style="font-weight: bold;">Welcome</span> <span style="font-weight: bold;">Welcome</span>
If you add font-weight property using the span tag, the font will be bold in the same line. If you use the p tag, the font will be bold the line-by-line.
Conclusion
I hope you guys have understood, how we can use the font weight to make the text bold. In the next CSS tutorial, we will discuss one more CSS property for more benefits.
