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:

enter image description here

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; }

  1. 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!


    CSS Howto..

    How to center image with full height and variable width

    how to center a box using blueprint css framework

    How to magnify images on hover using purely css? [closed]

    how to set css to a specific attribute of an input tag

    How do I blur an element with scroll, until it's blurred to a certain point?

    How to modify and save html/css in server-side?

    How to slice an Image Border for use in CSS?

    How to access parent element in CSS? [duplicate]

    How to make value text in form be italic

    How to vertically align html radio buttons with CSS-only in this code?

    How to develop a solid CSS strategy?

    How to implement MVC style on my PHP/SQL/HTML/CSS code?

    How to create a css class for category tags?

    How can I set my image's hover when hovering my text?

    How do I tell what are the ids and classes of a rail html.erb component?

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to insert line breaks in HTML documents using CSS

    How to make blur effect without white light?

    How to check css in unit test

    How to find out and get rid of unused CSS code? [closed]

    How to match all col height to row height in Bootstrap 3?

    How to display a div over other containts of an html page?

    How to enforce input text to take 100% width of its parent

    How to prevent CSS3 transform from make elements unclickable

    How to include by default icon inside a textarea

    How to set the path to compile my CSS with Compass SASS

    How to make right-side triangle in CSS ribbon menu?

    how to change a css class style through javascript?

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    CSS: how to create responsive irregular shapes