Problems using the '#' to identify tags in a master/content/css page combination

Question

I want to separate the design and implementation of my web pages into a separate HTML and CSS files (for easier maintenance).

I have the following Page defined in a project.

<%@ Page Title="" Language="C#" MasterPageFile="~/STGGeneral.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="SystemManager.Register" %>

And this makes a reference to the following CSS file

#UsernameLabel
{
    position: absolute; 
    top: 10px; 
    left: 10px;
}

The trouble is when ASP.NET generates the code sent to the browser it sends the following

   <!-- Login Popup -->
   <input type="image" name="ctl00$LoginButton" id="ctl00_LoginButton" class="LoginButton" src="Images/key.png" style="border-width:0px;" />

   <div id="ctl00_LoginFormPanel" class="LoginPanel">   
        <div id="ctl00_UpdatePanel1">                           
                <span id="ctl00_LabelUsername">UserId:</span>
                <input name="ctl00$UsernameTextBox" type="text" id="ctl00_UsernameTextBox" />            
                <span id="ctl00_LabelPassword" class="StandardLabel">Label</span>
                <input name="ctl00$PasswordTextBox" type="text" id="ctl00_PasswordTextBox" />
                <input type="image" name="ctl00$ConfirmLoginButton" id="ctl00_ConfirmLoginButton" class="ConfirmLoginButton" UseSubmitBehavior="false" src="Images/Security.png" style="border-width:0px;" />                
        </div>
   </div>

Because my 'Username' label is now called ctl00_LabelUsername by ASP.NET the style which positions this code тo longer works.

Is there a way of telling ASP.NET that I do not want it to change the name of my objects, or how do you do a reference using '#' within a page generated by a master/content page combination.

Answer 1

Quite simple. You change your css to reference ctl00_LabelUsername

Answer 2

If you are on .NET 4.0, they added ClientIDMode for this purpose

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

Answer 3

If you are not using ASP.NET 4.0 you can give a class to the Label, like

LabelUsername.CSSClass = "LabelClass";

else you can try using the CSS selector like-

.LoginPanel span
{
  // CSS Propeties for the label.
}