Published
- 2 min read
How to Make Text Bold in CSS
To make texts bold in CSS, you can use the property font-weight, which changes the weight of the font.
Set its value to a bold weight and you’re good to go.
The Basics: Using font-weight to Bold Text
Example:
font-weight: bold;or
font-weight: 700; /* Bold equivalent */How font-weight Values Work
The font-weight property accepts a range of values, from 100 (thin) to 900 (extra bold). Here’s a quick breakdown:
| Value | Description |
|---|---|
100 | Thin (Hairline) |
200 | Extra Light |
300 | Light |
400 | Normal (Default) |
500 | Medium |
600 | Semi-Bold |
700 | Bold |
800 | Extra Bold |
900 | Black (Heaviest) |
You can adjust the font-weight to make your text slightly bold (500 or 600) or extremely bold (800 or 900).
P.S.: Not every font has every weight. Some fonts may not support all font-weight values.
Using strong and b HTML Tags
Alternatively, you can use these two HTML tags to make texts bold without needing CSS:
<strong>: Adds semantic emphasis (recommended for important text).<b>: Makes text bold purely for styling.
Example:
<p><strong>This text is semantically important (bold).</strong></p>
<p><b>This text is bold but not emphasized semantically.</b></p>Tip: Use <strong> whenever the bold text conveys importance. Use CSS for general bold styling.
Bold Specific Text Within a Sentence
If you only want part of a sentence bold, you can create a <span> to target a specific element inside your text.
<p>This sentence has a <span style="font-weight: bold;">bold word</span> in it.</p>
<p>This sentence has a <span class="bold-text">bold word</span> in it.</p>Become a CSS Pro
Try your design ideas in seconds with a universal visual CSS editor that generates code for you. Say hello to speed, joy, and stunning designs in just a few clicks with CSS Pro. Click here to try it free.