Accessing external stylesheet in code behind

i have a unordered list(HTML) whose style i am changing conditionally in the code behind

<ul class="steps">
  <li class="" id="step1" runat="server">Step 1</li>
  <li class="step2" id="step2" runat="server">Step 2</li>
  <li class="step3" id="step3" runat="server">Step 3</li>
  <li class="step4" id="step4" runat="server">Step 4</li>
</ul>

in the code behind iam doing something

step1.Attributes["class"] = "step1";
step2.Attributes["class"] = "step2New";

something like this

If iam using internal styles then its working fine but when iam taking the same style sheet to external file then it is not working

Is it because i am assigning attributes using id i don't know please help me

the css file is some what like this

ul.steps li 
{
display:block;   
position:relative;
float: left;
color: white;
background: url('Images/steps.png') left -518px no-repeat;
min-height:60px;
height: 4em; 
min-width:202px;
width:20%;
line-height: 4em;
font-weight: bold;
font-size: 130%;
margin-bottom:1em;
text-align:center;
overflow:hidden;
margin-left:-20px;
}
ul.steps li.step1
{
    background-position: left -开发者_如何学运维418px;
}
ul.steps li.step2,ul.steps li.step3New, ul.steps li.step4New,ul.steps li.step4New2
{
    background-position: left -118px;
}
ul.steps li.step2New
{
    background-position: left -218px;
}
ul.steps li.step2New2
{
    background-position: left -318px;
}
ul.steps li.step3, ul.steps li.step4
{
    background-position: left -18px;
}
/*ul.steps li.step3New
{
    background-position: left -118px;
}*/
ul.steps li.step3New2
{
    background-position: left -218px;
}
ul.steps li.step3New3
{
    background-position: left -318px;
}
/*ul.steps li.step4New
{
    background-position: left -118px;
}
ul.steps li.step4New2
{
    background-position: left -118px;
}*/
ul.steps li.step4New3
{
    background-position: left -218px;
}
li
{
list-style-type:none;
display:inline;
}

Are you referencing the external CSS file correctly? You need to place a link element in the head section of the html, with the href attribute pointing to the CSS file:

<link rel="stylesheet" type="text/css" href="external.css" />

Use

 background: url('../Images/steps.png') left -518px no-repeat;