All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Bold Text In CSS

Last Updated : Mar 11, 2024

How To Bold Text In CSS

In this tutorial we will show you the solution of how to bold text in css, as we know css used to style html elements, here we used css as inline method for make text as bold.

Bold means text looks like thickness or width will increased text we can see the difference clearly from normal text.

For make text to be bold we need to use style property of ‘font-weight’ value to ‘bold’ in css.

This style is mostly used to highlight the main text from a paragraph from a blog or website anything so user can quickly find outs the main things.

Step By Step Guide On How To Bold Text In CSS :-

We can implement styles using three types (i.e inline, external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.

Here we used inline style method and in our program we defined two <p> para tag to display some text on webpage.

In first <p> tag we defined inline style with property ‘font-weight’ to value ‘bold’ we makes that line of sentence to be bold and we can use <b> tag also available in html we can get same result of bold so we used on second <p> tag.

<!DOCTYPE html>
        <title>BOLD TEXT</title>
        <p style="font-weight: bold;">Hi! everyone welcome to our website</p>
        <p><b>Here we using "b" tag for bold this line</b></p>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. We defined first <p> tag with inline style with property ‘font-weight’ value ‘bold’ to make that sentence as bold and we can also use values like ‘100,200,400.,,etc’.
  7. In html for make any sentence, paragraph or word to bold we can use ‘<b>’ tag, need to insert at front and end letter of text.
  8. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to make a text to bold using css.

As we know when writing, reading or seeing any blog, news or website we need to highlight something main from that so we have to know this style.

It is really important and widely using concept to user clarification or quick understanding we using this method.

We can make bold easily either using css or html tag definitely result will be same it is depends on your situation.

I hope this tutorial on how to bold text in css helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪