How to Bold Text in CSS?

A bolded text has a slightly higher weight than a normal text. Therefore, It is mostly used when we want to capture the user’s attention to a certain important part of the text.

To make a text bolded in CSS, we use the font-weight property. The font-weight property sets how the bolded text should appear on the visitors’ screen.

The font weight can be specified either as a numeric value such as 100, 200, 300, etc. or as a keyword such as normal, bold, bolder, etc. We mostly use font-weight: bold; to make the text bolded.

See the following working example:

Example:

.bolded{
   font-weight: bold;
}

You could also use numeric values to make the text bolded.

400 is same as normal and 700 is same as bold.

See this example:

Example:

.bolded{
   font-weight: 700;
}

Make Text Bolded Using HTML

If you don’t want to write any external CSS to make the text bolded, you can alternatively use HTML’s <b> and <strong> tags.

The <b> and <strong> tags both are inline elements, which means you can make any part of the text bolded just like the font-weight: bold;.

See this example:

Example:

<p>Some part of <b>this text is bolded.</b></p>
<p>Some part of <strong>this text is also bolded.</strong></p>

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.