CSS - Please Help Edit This Css

ok the stylesheet contains this:
BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
}

and I need to add this into it

BODY {
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

Ok here's what I don't understand. The original stylesheet(used by a php script) contains lots of things at the top separated by commas. Does that mean that it will affect all of those things?
So I have to do this?

BODY
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
}

Sorry about the newbie question, but I gotta start some where.

I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions?

Hi, I'm totally new to CSS and I need to edit a TEXT of our login page portal.

I'm using firefox/firebug to view the contents but i can't seem to find the exact html file to edit it. I tried to edit the login.aspx file but I cannot find the contents to edit there.

All I see is runat="server" if i follow my page using "view code" in my browser instead of the actual TEXTS that i need to edit.

Hope someone can help me on this.

TIA!

ok i have the style but i want to put some other stuff on like widgets but i dont know how to an i cant do it from the ACP

Hello,

I have the following code that creates a progress bar:

Code:

<style>
table.meter {
    background: url("img/m_bg.gif") left center repeat-x;
    height: 13px;
    font-family: sans-serif;
    font-size: 11px;
    }

table.meter td.mark{
    background: url("img/m_mark.gif") right center repeat-x;
    }

table.meter td.mark div{
    background: url("img/m_l.gif") left center no-repeat;
    }

table.meter td{
    background: url("img/m_r.gif") right center no-repeat;
    }

</style>

<table cellspacing="0" cellpadding="0" class="meter" width="250">
<tr>
  <td id="mark" width="60%" class="mark"><div>&nbsp;</div></td>
  <td>&nbsp</td>
  </tr>
</table>

This will make only image progress bar, but how can I write percents straight after table (on the right)?
I need it to look something like this:

<|||||||| > 60%

But if I write "60%" after </table> tag, it will appear on the next line, and if I add another <td> to the table, it will inherit background from table.meter style and I don't need that.

Hope somebody help me.
Thank you in advance.