ok, lets say I have a calendar plugin and it gives me a 'Upcoming events widget, and I want to change the title to red. I add the widget to my left sidebar (could be any sidebar) and go view the page. This is what I see in the code:
HTML Code:
<!-- Main Body -->
<tr id="bodyrow">
<!-- Left Sidebar -->
<td id="left">
<div id="upcoming-events" class="widget my_calendar_upcoming"><div class="widget-title"><h3>Upcoming Events</h3></div><ul><li class="future-event"><strong>May 29, 2010</strong> – test1<br /><span>11:11 am, </span></li>
</ul></div>
</td>
<!-- / Left Sidebar -->
<!-- Main Column -->
looking at this I see it has an ID="upcoming-events" - this is great because an ID can only be userd once in a page, so I can directly address this widget. Now it's just a matter of coding the CSS Selector and rule.
For the rule I'll just use 'color: red; so I could code
HTML Code:
#upcoming-events {color: red;}
and this would color the title red, but it would also color all the rest of teh text red also, so I need to be more selective so I'll use the h3 in teh selector to get
HTML Code:
#upcoming-events h3 {color: red;}
and now only H3's in the element with the ID of "upcoming-events" will be red.