How to bold the text using CSS ?
We will use the font-weight property of CSS to make the content bold. We have a variety of options to set the thickness level of our text.
- normal : It is the normal font-weight. It is the same as 400, the default numeric-value for boldness.
- bold : It is the bold font-weight. It is the same as 700.
- bolder : It sets the font-weight bolder than the parent element.
- lighter : It sets the font-weight lighter than the parent element
- <number>: A <number> value between 1 and 1000, inclusive (in increasing order of boldness level).
When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.
Parent Value lighter bolder 100 100 400 200 100 400 300 100 400 400 100 700 500 100 700 600 400 900 700 400 900 800 700 900 900 700 900
Example 1: The following example demonstrates a simple text which is represented in bold using CSS font-weight property.
Example 2: The following example demonstrates few simple texts represented using other font-weight properties.
- Google Chrome 2.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.3