How to Make Text Bold in CSS

Whenever any text requires emphasis or attention, it is set to bold to get the attention. In HTML, we use the <b> tag or <strong> tag to make text bold. CSS also has the support to bold the text. However, you cannot control the intensity of boldness. here, the CSS plays its role. In CSS, the boldness of the text can be increased or decreased with the help of the font-weight property.

This post provides an insight to make tests bold in CSS with the following learning outcomes:

• How font-weight property works in CSS
• How to make text bold in CSS

How font-weight property works in CSS

In CSS, the font-weight property sets the intensity of the font’s boldness which means this property increases or decreases the boldness dynamically. The following syntax explains the usage of this property

Syntax

In the above syntax font-weight property can be used as inline, internal, or external CSS and we can set its values as light, lighter, bold, or bolder. We can also specify the value of property by a number from 100 to 900.

How to bold the text in CSS

In CSS we use the font-weight property in order to bold the text. As discussed earlier, the font-weight property accepts the fixed name in value and a numeric value as well.

Using the bold value of the font-weight property
We can set the values to bold and bolder according to the requirement. The following example will help you in understanding the font-weight property.

Example

In this example, we have used the CSS ‘font-weight’ property and set its value to ‘bold’

Output

This output shows that the paragraph’s text becomes bold after using the font-weight property as we set its value to bold.

Using a numeric value of font-weight property
We have a font-weight property with numbers which means we can change the thickness of the text by setting its value from 100 to 900. Whereas values from 100 to 600 are for lightening thickness and values from 700 to 900 are for the boldness of the font.  In the example below, you will get a clear idea of  using font-weight property with numbers.

Example

In this example, we used CSS font-weight property and set its value as 750 to bold the text.

Output

This output shows the boldness of the text according to the given thickness.

Conclusion

In CSS, the font-weight property of CSS can be used to bold the text in a variety of means. The value of the font-weight property determines the intensity of bold text in CSS. This post provides a demonstration of how to make text bold in CSS. The font-weight property accepts the specific as well as numeric values to boil the text in CSS.