I have been struggling with this for over a month. I have gone through all threads but all in vain. from one of the threads i learned how to change the background color of a single widget but when i use that, nothing happens. look at the css i use and tell me what is my mistake.

div.text-26 {
background-color: #EEEEEE;
}

I am trying to color the widget which contains authors bio. http://www.christiantruthcenter.com

I am trying to color the widget which contains authors bio

which widget might that be?

In the side bar, it is the first top widget. The widget contains a picture of myself and a small bio

the 'text-26 is the ID not a CLASS - you need to correct your syntax

From a previous thread i read that we use the widget id and that is what i used. which syntax do i use then? give me an explanation on this.

You do use teh ID, you just have teh syntax wrong. Go read take a CSS tutorial and see teh difference between ID and CLASS syntax. A good tutorial is at htmldog.com

I have tried all that in vain. even if i change the css to;

div#text-26 {
background-color: #EEEEEE;
}

I do not see any change.

there is a div within the main div that also is being assigned a background color, so your CSS works fine, it is just being overriden by the second background statement. you need to override that CSSAND prefix teh selector with the 'div#test-26' selector.

If you look at it with FireBug in FireFox, you should see it real easily.

i have tried to override it with this below css but all in vain;

div#text-26 {
background-color: #EEEEEE !important;
}

Can you please give me a good example?

Did you examine the elements using firebug?

not yet. is there any other way because all my widgets needs to be styled and non is accepting my commands?

not yet. is there any other way

sure, view the page and then view with page source and look at the code...though FireBug is easier.