In this tutorial, we will be discussing three different methods for making text bold using CSS. Whether you're new to CSS or have been working with it for a while, this tutorial will provide you with the knowledge and skills to make your text stand out on your website. So, let's get started and learn how to make text bold in CSS!
Make Text Bold in CSS Examples
In most cases, you’ll use the bold keyword to boldface a font using the font-weight property. But if you want to apply varying degrees of boldness, you can use multiples of 100.
Also, you can use inline CSS for elements and can use <b> and <strong> elements to make the text bold in a paragraph. Below are the examples:
1. Using the CSS font-weight Property in Head Section
For font-weight, you specify the number that determines the boldness of the font: normal, bold, bolder, lighter, or multiples of 100 from 100 to 900, with 400 equivalent to normal. Bolder and lighter are relative to the parent element.
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
How to Specify font-weights to Convert Text in Bold?
font-weight: 700; font-weight: bold; /* same as 700 */ font-weight: normal; /* same as 400 */ font-weight: lighter; /* relative to the parent element */
CSS for Class in Head Section
<style>
.bold_text {
font-weight: bold;
}
</style>HTML
<body> <p class="bold_text">This full paragraph is bold.</p> </body>
Output
This full paragraph is bold.
2. Using the <b> Element
Put the <b> element between a paragraph element to make a certain part of paragraph bold.
HTML
<p>Some part of the <b>paragraph is bold</b>.</p>
Output
Some part of the paragraph is bold.
3. Using the <strong> Element
Make the text bold of a specific part of the paragraph using the <strong> element.
HTML
<p>Some part of the paragraph is bold <strong>using the strong element</strong>.</p>
Output
Some part of the paragraph is bold using the strong element.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.bold_text {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Examples: Bold Text in CSS</h1>
<h2>Using CSS class</h2>
<p class="bold_text">This full paragraph is bold.</p>
<h2>Using b element</h2>
<p>Some part of the <b>paragraph is bold</b>.</p>
<h2>Using Strong element.</h2>
<p>Some part of the paragraph is bold <strong>using the strong element</strong>.</p>
</body>
</html>Output
Conclusion
In conclusion, there are many ways to make text bold in CSS, but the three methods we discussed in this tutorial are some of the most commonly used. By using the CSS font-weight property, the <strong> tag, or the <b> tag, you can easily make your text stand out on your website. Remember to always test your code in multiple browsers to ensure compatibility and consistency. We hope this tutorial has been helpful in your web development journey and that you feel more confident in your ability to make text bold in CSS. Happy coding!
how can we use a href tag in html so that we can navigate from our website 1st page to our website second page.
Below is the basic syntax and example of href tag in HTML:
Syntax:
Example: