In this tutorial we will show you the solution of how to make text bold in CSS, in order to structure a website, we occasionally want to bring attention to something important as developers. This can be done in a variety of ways.
The simplest method is to make the font weight of the text you want to highlight bold. You'll know how to make text bold in CSS in this article.
Step By Step Guide On How To Make Text Bold In CSS :-
The font-weight attribute can be used to make text bold. Font weight is determined by the font-weight CSS attribute (or boldness).
The font family presently selected determines the weights available. Here's an example of how to use CSS to make text bold.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
font-size: 15px;
}
</style>
</head>
<body>
<p style="font-weight: normal;">It is normal bold.</p>
<p style="font-weight: bold;">It is a bold font </p>
<p style="font-weight: lighter;">It is a lighter font</p>
<p style="font-weight: bolder;">It is a bolder font</p>
<p style="font-weight: 100;">This font is of 100 weight.</p>
<p style="font-weight: 200;">This font is of 200 weight.</p>
<p style="font-weight: 300;">This font is of 300 weight.</p>
<p style="font-weight: 400;">This font is of 400 weight.</p>
<p style="font-weight: 500;">This font is of 500 weight.</p>
<p style="font-weight: 600;">This font is of 600 weight.</p>
<p style="font-weight: 700;">This font is of 700 weight.</p>
<p style="font-weight: 800;">This font is of 800 weight.</p>
<p style="font-weight: 900;">This font is of 900 weight.</p>
</body>
</html>
- First, we type <! DOCTYPE html>, which tells the web browser what version of HTML the file is written in.
- The <html> element, on the other hand, is used to identify the start of an HTML document.
- The <head> tag now contains information about web pages. A <title> element is utilised in this tag to let us provide a web page title. Paired tags include the <head> and <title> tags. As a result, both have the </head> and </title> finishing tags.
- Finally, the <body> element is used to define the content of the webpage. This is where you'll write all of the website's content. The font-weight property is the first to be added.
- Font-weight: bold will be applied by default in most cases! You do, however, have a little more flexibility than that, as you might anticipate.
- Instead of bold and normal, you can use the above code to specify a number to fine-tune the level of boldness displayed in your text.
- A <style> tag was used in the head tag. We've set the font size to 15px in this case.
- Most typefaces have between one and nine different weights, which are labelled in 100-point increments from 100 to 900 in most cases. All of them are mentioned in the code above.
- Finally, the </body> and </html> tags are used to close the <body> and <html> tags, respectively.
Conclusion :-
You didn't realise there was so much that goes into making fonts bold, did you? True, there's a lot to remember, but grasping these details is what separates the good from the great, so cheers on taking the next step in your training!
We looked at the CSS font-weight property and how it influences how bold our fonts are in this tutorial.
I hope this tutorial on how to make text bold in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
