CSS Bold Text

The font-weight property in CSS is used to set the weight or thickness of the font. It specifies how thin or thick the characters in a text. The font-weight property is either dependent on the weights specified by the browser or the available font faces in a font family. This CSS property defines thin to thick characters.

It accepts the predefined numeric value or keyword values. The available keywords that we can use with this property are normal, bold, lighter, and bolder. The numeric value can be 100, 200, 300, .........,upto 900. The higher numeric value represents the bolder font-weight than the lower numeric values.

Syntax

The number in the above syntax represents the numeric values. The numeric value 400 is same as the keyword value normal, and the value 700 is same as the keyword value bold.

The normalstrong> value defines the normal characters, and the bold value specifies the thick characters. The bolder value represents the bolder font-weight, and the lighter value represents the lighter font-weight than the weight inherited from the parent.

Let's see how to bold text in CSS by using an illustration.

Introduction

CSS is known as a powerful tool for the development of the web page. With the help of this, we can style the HTML content in so many ways. One of the most common properties of styling the web page is using the help of a font-weight property. With the help of bold text, we can emphasize the key information and visual contrast, and it also improves the readability of content.

Understanding Font-Weight Property

In CSS, there is a Font-Weight property, which is used to define the weight or thickness of the font. It also determines the degree of text boldness or lightness, with accepting the higher value indicating a bolder font-weight. The font-weight property accepts various values, such as numeric and keyword values.

The range of numeric values lies between 100 and 900, with increments of 100. For example, if we take the font-weight value as 400, then it is normal, while a 700 font-weight value is considered as bold. Bold, bolder, lighter, and Some commonly used keyword values.

How to Create Bold Text with CSS

We can create the bold text in HTML with the help of CSS. We can use inline, internal, or external font-style properties.

1. How We Can Create the Bold Text with Inline Styling

With the help of inline styling, we can use the font-weight property directly to a specific HTML element. Let's take an example.

HTML code:

Output

Explanation:

In the above code, we used the inline CSS and applied the font-weight property as bold.

2. How We Can Create Bold Text with Internal Styling

Here, we have to write the CSS property inside the head tag with the style tag. Let's take an example:

HTML code:

Output

Explanation:

In the above code, we have used internal CSS and applied the font-weight property.

3. How We Can Create Bold Text with External Styling

Here, we have to create an external CSS file and link it to the HTML file. Inside that CSS file, we have to write the style property. Let us take an example.

HTML code:

CSS code:

Output

Explanation:

In the above code, we have used the external CSS property and implemented the font-weight property.

Example

Let's see how to create bold text in different shades by using the below example:

Output