<strong> is the HTML tag that you can make use of to make a text bold, but if you want to make use of CSS for it then you can make use of the font-weight property.
The font-weight property allows you to control the thickness or boldness of the text.
Let's take a look at a few examples.
Example:
<p>This is a normal text.</p>
<p><strong>This text is made bold using <strong> tag.</p>
<p style="font-weight: bold">This text is made bold using font-weight CSS property!</p>Output:
| Property | Description | Example | Demo |
|---|---|---|---|
font-weight: normal; |
Represents the default, normal font weight. | <p style="font-weight: normal;">your text</p> |
This text has normal font weight. |
font-weight: bold; |
Represents a bold font weight. | <p style="font-weight: bold;">your text</p> |
This text is bold. |
font-weight: 100; |
Represents a very thin or hairline font weight. | <p style="font-weight: 100;">your text</p> |
This text has a very thin or hairline font weight. |
font-weight: 200; |
Represents an extra-light font weight. | <p style="font-weight: 200;">your text</p> |
This text has an extra-light font weight. |
font-weight: 300; |
Represents a light font weight. | <p style="font-weight: 300;">your text</p> |
This text has a light font weight. |
font-weight: 400; |
Represents the normal font weight (often referred to as "Regular"). | <p style="font-weight: 400;">your text</p> |
This text has the normal font weight (often referred to as "Regular"). |
font-weight: 500; |
Represents a medium font weight. | <p style="font-weight: 500;">your text.</p> |
This text has a medium font weight. |
font-weight: 600; |
Represents a semi-bold font weight. | <p style="font-weight: 600;">your text</p> |
This text has a semi-bold font weight. |
font-weight: 700; |
Represents a bold font weight. | <p style="font-weight: 700;">your text</p> |
This text is bold. |
font-weight: 800; |
Represents an extra-bold font weight. | <p style="font-weight: 800;">your text</p> |
This text has an extra-bold font weight. |
font-weight: 900; |
Represents a very thick or black font weight. | <p style="font-weight: 900;">your text</p> |
This text has a very thick or black font weight. |
font-weight: lighter; |
Represents a font weight that is lighter than its parent element's font weight. | <p style="font-weight: lighter;">your text</p> |
This text is lighter than its parent font weight. |
font-weight: bolder; |
Represents a font weight that is bolder than its parent element's font weight. | <p style="font-weight: bolder;">your text</p> |
This text is bolder than its parent font weight. |
font-weight: inherit; |
Inherits the font weight from its parent element. | <p style="font-weight: inherit;">your text</p> |
This text inherits its font weight from its parent. |
font-weight: initial; |
Represents the initial value of the font weight property. | <p style="font-weight: initial;">your text</p> |
This text uses the initial font weight. |
font-weight: revert; |
Represents a value that reverts to the parent element's value. | <p style="font-weight: revert;">your text</p> |
This text reverts to its parent font weight. |
font-weight: revert-layer; |
A value that reverts to the parent element's value, used in multi-layer contexts. | <p style="font-weight: revert-layer;">your text</p> |
This text reverts to its parent font weight in multi-layer contexts. |
font-weight: unset; |
Represents a value that is a combination of the initial and revert values. | <p style="font-weight: unset;">your text</p> |
This text uses a combination of initial and revert font weights. |
Provide Feedback For This Article
We take your feedback seriously and use it to improve our content. Thank you for helping us serve you better!
😊 Thanks for your time, your feedback has been registered!
Comments & Discussion
Facing issues? Have questions? Post them here! We're happy to help!