html

How to Bold Text in CSS

The bold will make the elements appear thick or it will appear with a strong or clear appearance. The bold text is the text that appears thicker than the simple text. We can make our text bold by applying the CSS “font-weight” property and setting it “bold”. We can also set some numeric values or the “bolder” keyword for this property. In this “font-weight” property we will set how thick the text will render on the output screen. We can also bold our text in HTML by utilizing different tags. But here we will discuss the CSS property which is used for applying the bold effect to the text. We will explore this bold text in detail in this tutorial. We will also do some codes in which we bold the text by setting numerical values in the property as well as by using keywords.

Example # 1:

We need a few elements to apply the “font-weight” property. As a result, we start by creating some HTML elements. We must first open a new file to create an HTML file by choosing HTML as a language. The software we’ll be using in this tutorial is the Visual Studio Code. In this file, we’ll start writing code. Additionally, we enter “!” and then press “Enter” to acquire the fundamental HTML tags, which are necessary for all HTML codes.

After all of this, we need to create the body where we’ll add a few paragraphs below the heading. We are giving each paragraph a unique name so that we can use it when we apply the “font-weight” attribute to these paragraphs. We have three paragraphs here. Now, we will apply the “font-weight” property to these paragraphs in the CSS code. We must link both files, the HTML and the CSS file inside the head by utilizing the “link” tag.

First, we put the name of the paragraph “p.p1” and then utilize the “font-weight” property. This property is used for setting the text thickness. Here, we set it to “normal” which is also a default value. The “font-size” for this first paragraph is “20px”. After this, we have a second paragraph named “p2” and set its “font-weight” to “bold”. This “bold” keyword is used in making the paragraph’s text thicker than the simple text and also set its size to “20px”. Now, for “p3”, we again utilize the “font-weight” property. This time, we set the numeric value for setting the thickness of the third paragraph and making it “bold”. Here, we use the “900” value for this “font-weight” property. So, the text of the paragraph will appear “bold” and also “font-size” is the same as the above paragraphs.

Here is the output below, we have three paragraphs in the output and the first paragraph is simple because we set its value as normal. The second paragraph is thicker than the first one which means this paragraph is “bold”. Also, the last paragraph is “bold” but for the third paragraph, we set the numeric value in the “font-weight” property.

Example # 2:

Here, we have seven different paragraphs with unique names so we will use these names in the CSS code for applying the “font-weight” property on them. We will set a numeric value for this property as well as keywords.

We are utilizing “color” for the heading as “maroon” and set the “font-size” for all “body” to “22px”. For “par1”, we set the “font-weight” to “normal” and “red” as the “color” of this “par1”. For “par2”, we set the “font-weight” value as “600” and the “green” color is here for “par2”. The “font-weight” value for “par3” has been set to “700” and the color “blue” is used here. Now, we again utilize the “font-weight” property for the next paragraph “par4” and set it to “800” and its “color” is “orange”. The “par5” “font-weight” is set as “900” and the “color” for “par5” is “purple”. After this, we are setting the keyword “bold” for the “font-weight” value for “par6” and also defining its “color” to “pink”. Now, we have the last paragraph “par7” and set it to the “bolder” keyword. The “color” of “par7” is “magenta”.

You can see multiple paragraphs with different values of the “font-weight” property. The first paragraph appears normal as we set its value as “normal”. The remaining paragraphs appear “bold” because we set the thickness of these paragraphs in the CSS code by utilizing the “font-weight” property.

Example # 3:

We have two paragraphs in this code and will apply the “font-weight” property to one paragraph and will show you the difference between the bold text and the simple text.

First, we are going to style the body by utilizing two properties. The “font-size” property sets the size of the text to “20px” and then aligns all the body elements to the “center” using the “text-align” property. We also style the heading for making it more appealing by utilizing “maroon” for the “color” of “h1”. We have set “Algerian” as “font-family” and “underline” the “h1” using the “text-decoration” property. For the “h2”, we set the “green” color and the “font-family” is “Times New Roman”. Now, we are going to utilize the “font-weight” property for both paragraphs. For “para1”, its value is set as “normal”. But for the “para2”, we simply use the keyword as its value and set it to “bold” for making the text thick.

You can easily notice the difference between both paragraphs. The first paragraph is the normal paragraph but the second paragraph here is “bold”. The font size of both paragraphs is the same but you can see that the second paragraph appears bold.

Example # 4:

We have two different headings and four different div classes with different names for each div. We are going to utilize the “font-weight” property for these divs.

First, we will use these two parameters to style the body. The “font-size” attribute adjusts the text’s size to “21px”. The “text-align” property “center” all of the body components as we set it. The “font-family” for all body elements is “Times New Roman”. We use “purple” as the “color” of “h1”, define the “font-family” to “Algerian” and we additionally style the heading by setting the “text-decoration” attribute to “underline” the “h1”. We chose the color “orange” for the “h2” and “Calibri” as the font family. We don’t apply any property for the “div1” and the “div2”, we are setting a “900” numeric value for the “font-weight” value. We have “div3” and “bold” used for “font-weight” and the “div4”, “font-weight” is set as “bolder”.

The first “div1” paragraph is simple and we didn’t set any “font-weight” value for this div1, so the default value is set here for “div1”. For the other divs, we set the value of the “font-weight” value and make the text of these divs “bold” or “thick”. We also mention the “font-weight” of all divs in the output. The div2 appears with font-weight value “900”, the next div3 appears here as a “bold” value for the “font-weight” property, and “bolder” for the last div3.

Conclusion

You have learned how to use the CSS “font-weight” property through the course of this tutorial. In this tutorial, we have examined the CSS “font-weight” property and have explained what it does, why we use it, how to use it, and what results it produces. The “font-weight” property has already been covered in this tutorial. We have utilized this “font-weight” property for setting the weight of the font to thicker or bold. Along with the outcomes of each example in this tutorial, we have also provided codes of how to use the “font-weight” property. I believe you will have a solid understanding of the CSS “font-weight” property after carefully reading this tutorial.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.