System.Web.UI.WebControls.* class property v.s. CssClass property

The difference might be subtile, at least it has always been to me. The class property corresponds to the standard attribute you can add to a HTML element, and the CssClass is the ASP.NET usercontrol counterpart, no matter which one you set the result is the same right?
Well…almost….

An ASP.NET TextBox control for instance declared as
<asp:TextBox runat="server" ID="_txtUsername" class="username" />
or
<asp:TextBox runat="server" ID="_txtUsername" CssClass="username" />

will get rendered as
<input type="text" class="username" id="_cphMainContent__txtUsername" name="ctl00$_cphMainContent$_txtUsername">

The difference occurs if you set the Enabled property for the TextBox to false, to prevent the user from entering any text after the form has been submitted for instance. The class=”username” approach will result in the following rendering

<input type="text" class="aspNetDisabled" disabled="disabled" id="_cphMainContent__txtUsername" value="test3@test.com" name="ctl00$_cphMainContent$_txtUsername">

while the CssClass=”username” approach will get rendered as

<input type="text" class="aspNetDisabled username" disabled="disabled" id="_cphMainContent__txtUsername" value="test3@test.com" name="ctl00$_cphMainContent$_txtUsername">

 

As this example shows, we actually loose the custom CSS class styling when ever the Enabled property is set.

So the simple conclusion is:
Always assign CSS class styling to System.Web.UI.WebControls.* using the CssClass property.