Here’s the situation: You’re trying to make some of the text on your web page bold using CSS. But even though your CSS rule is written correctly, the font-weight: bold property just doesn’t work.
I’ve dealt with this problem more times than I can count. And I’ve written this guide to help you and others like you not have to spend hours struggling with it.
To find out how to make font-weight: bold work, read on below.
Why Your CSS Rule Isn’t Working
If your CSS rule to make the text in a particular DOM element bold is formatted correctly but still doesn’t work, it’s probably overridden by another rule in one of the HTML document’s style sheets.
We’ve written about this in detail in a post titled, “How to Prevent CSS Override.” For the details, check out that post, then come back here and continue reading. For the short version and quick fix, read below.
So, why isn’t your CSS rule working?
Because the font-weight property of the text in the DOM element in question is being targeted by another CSS rule that’s overriding yours.
As a general rule, when multiple CSS rules are targeting the same property of the same DOM element, the one with the most specific selector overrides the others.
<html>
<body>
<p class="bold" id="bold-1">Bold</a>
</body>
</html>We can target the font-weight property of the <p> element in this HTML document with multiple CSS rules, each overriding the other.
Here’s how this works:
p { font-weight: bold; }
body p { font-weight: normal; }
p.bold { font-weight: bold; }
p#bold-1 { font-weight: normal; }
/* Rules with the !important keyword override all others */
p { font-weight: bold !important; }In CSS, this is called specificity. Basically, the CSS rule with the most specific selector always prevails over all others.
How to Make It Work
There are two ways to make font-weight: bold work for the DOM element (or DOM elements) in question.
The first is to rewrite your CSS rule’s selector so that it’s more specific than the selectors of any other CSS rules targeting the DOM element in question. (In doing so, it’s useful to open the inspector on your browser’s dev tools and see those selectors.)
The second is to add the !important keyword to the declaration of the font-weight: bold property in your CSS rule.
So if your CSS rule looks like this right now:
p { font-weight: bold; }Try making it look like this—and see if it fixes your problem:
p { font-weight: bold !important; }If you’re trying to override a CSS rule that’s inlined into the style="" attribute of A DOM element, this method is the only one that will work.
In Conclusion
Remember: When font-weight: bold isn’t working, your CSS rule is most probably being overridden by another CSS rule with a more specific selector.
Rewrite your CSS rule with a more specific selector or add the !important keyword to the end of the property declaration, and you should be able to make it work.
Thank you for reading this far and, in case you have any questions or would like to share tips of your own with the rest of this post’s readers, don’t hesitate to leave a reply below.
