CSS priorities when adding, for instance, widgets in footer....
 

when I add widgets in footer, as per http://forum.bytesforall.com/showthread.php?t=19079, it works great.

I need to change the color of the text in footer widgets...

I tried various things, the last being in the widgets.css file:

/* FOOTER WIDGET AREAS */
.widgetarea-three {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}


also tried same code as #widgetarea-three in styles.css but in any way it is all overwritten by aside#text4-widget.

So I understand that the overall widget style is overriding the particular default footer style I selected; how would I specify specific styles and where to override the default behaviors assuming i followed the coventions widgetarea-three, widgetarea-four, and widgetarea-five??

Thanks.

There's a simple way if you're only doing a few, without even editing the css files. Just put a style change in your template such as "style = color:#ffffff;" in your sidebar div.

If you were doing many, it would be easier to put it in a css file, especially if you wanted to change them.

If you want them to be all the same look, then give them a class, so if you change one, you can change them all with one css file edit.

Try different methods, then use firebug to check your results. Validate often as you go. Have fun.

In my opinion, you should avoid inline CSS when possible, without good notes, it can make future maintenance a nightmare. By putting it into the CSS styling, you keep things together and can reuse the same CSS for multiple HTML elements

I would put any additional CSS in the last CSS file (not at my desktop so I can't name exactly) and remember the order of precedence for CSS

I tried several ways, and created a footer class for widgets called footc1 as you can see in screenshot below.

however, whereever i put it, it's css keeps getting overridden.

can anyone help? i've tried to move it several places.

thanks in advance!

you need to be more specific in the CSS Selector. since the html structure is
you should use 'div.footerc1 aside div.textwidget' - try that and see what it does

thanks for the reply juggledad and forgive my ignorance; where exactly should i put this??

'div.footerc1 aside div.textwidget'

should that be an entry under style.css or widget.css?

should that be

.div.footerc1 aside div.textwidget {

blah blah blah

}

or

#div.footerc1 aside div.textwidget

the html being generated is from the firebug plugin; the code generating it is from the subtemplate footer.

i'm sorry, but i am not following where exactly to put this...

you can put it in any of the CSS files, though I'd probably put it at the end of the 'clearfix.css' so you would know that is where you override any CSS.

so you would add
there.

did that, does not change color;seems to overrule it. it is from

didn't work either.

I see some syntax issues. Here are some basic syntax rules for CSS files:

1. Elements have no punctuation before them.
2. Classes are prefaced with a period.
3. ID's are prefaced with a hash mark (#).

So, for example, you have a div with a period before it, but I doubt you're trying to refer to a class named div. You have a reference to text-4, which seems to be an id, but you have it prefaced with a period.

Try cleaning up your syntax, and you should have it.

go back and check my original CSS, there was an errant period which I removed. (I claim the ten month old in my arms did it)

thank you both.

so, i need to read up more on css conventions.

i take it that it is an element, a specific subset of a class, and not an id....

enjoy your 10 month old and thanks...

Element is an HTML element. You should take a CSS tutorial, htmldog.comhas a good one