How to make text bold using CSS


<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:

Bold text using CSS Font-Weight Property

Note: If you want more fine-grained control of the text's thickness, you can use numeric values from 100 to 900.

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!


Author Info:

Rakesh (He/Him) is a seasoned developer with over 10 years of experience in web and app development, and a deep knowledge of operating systems. 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

Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap