<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. |
Facing issues? Have Questions? Post them here! I am happy to answer!
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- Add Text at Start and End of Each Line Notepad++ - NotepadPlusPlus
- How to Comment out Code in PowerShell Script - Powershell
- How to make a Android button act as a toggle button - Android
- How to add hours and minutes to Java Instant - Java
- PHP 301 Redirect Permanently - PHP
- Round Number up to 2 decimal places in Python - Python
- Accept Only 0-9 Numbers RegEx Example - HowTos
- Take input argument from command line in Python Programming - Python