How do I decrease font size?

My HTML code: (relevant snippet)

This is a TR where i am showing a text in h4

<h4>Pay Your Payments On-line</h4>

I wish to decrease font size of “Pay Your Payments On-line” text.

what changes do I need to do to decrease font size of the text ?

I am using bootstarp.css and common.css for styles.

I have h4 (heading) in my common.css. But however this h4 is also defined in bootstrap.css by default.

Please see the css loaded in the FIREBUG CSS console…cold you please tell what changes I need to do to decrease font size ?

Your common css should be placed after the bootstrap css file in the html otherwise you won’t be over-riding the defaults.

I already have it that way.

please see the firebug screenshot of css loading … you see in this console h4 font-size in common.css has been crossed out !

What is the work around ?

Because the rule in each case is just h4 {}, that really does suggest that the bootstrap style is being read second. Can you provide a screen shot of your style links in the page head?

What is the work around ?

A quick and dirty workaround is

h4 {font-size: 12px [COLOR="#FF0000"]!important[/COLOR];}

Not according to the 2 screenshots of Firebug that you just posted. The styles at the top of the Firebug are the rules that are being applied. The bootstrap files are over-riding your common.css and as the styles have the same weight it must be that the boostrap css is later in the cascade.

As Ralph said post the html from the head of your page so that we can check there isn’t some other problem there.

Yes…paul / ralph …you are right. I did a mistake …I was looking at bootstrap.js instead bootstrap.css mistakenly :slight_smile:
anyway… issue resolved now.


Hehe, that happens to me more often than I’d like to admit. :smiley: