How to override default tag css to normal?

Tags: html,css,html5,css3,user-interface

Problem :

Is there a way to make the text wrapped inside <b> </b> tag as normal?

I've tried implementing font-weight: normal !important; through CSS, but it didn't help. Is it even possible?

Reason of asking this question:

1. I'm writing print page styling for a ready made page, so it is not possible for me to get into the code and replace the <b> tag.
   
2. After several failed attempts, I am quite curious to know if it is possible to override user agent stylesheet for tag.

Here is the screenshot:

It is seemingly impossible for me to produce it on jsFiddle.

Here is the HTML code:

<figure>
 <i class="icons-i-Spirit"></i>
 <figcaption class="text-uppercase"><b>main spirit</b></figcaption>
</figure>

Here is the CSS:

figcaption {
  font-family: 'TradeGothicW01-BoldCn20_675334';
  font-weight: normal !important;
}

---

Solution :

There are two things going wrong in your case:

1. You are applying css to the parent of <b> tag. Make your code as following:

figcaption b { font-family: 'TradeGothicW01-BoldCn20_675334'; font-weight: normal !important; }

2. Considering your screen-shot, you are making the CSS edit which is described in 'Point 1' on Chrome's style editor. Please make the changes in your CSS file and then reload your page.

PS: I have also been in such situation for hours. It makes you feel quite dumb of yourselves. Don't worry, To err is human!