Difference between Class vs CSSClass in ASP.Net CSS + CSS syntax question

What is the difference between:

<asp:GridView CssClass="someclass"

and

<table class="someclass">

And how does it relate to how one defines CSS?
For example, using CssClass, one can (I think) write CSS like so:

.someclass {font-family:"arial";  
        background-color:#FFFFFF;  
        width: 100%;  
        font-size: small;}  
.someclass th {background: #7AC142;  
             padding: 5px;  
            font-size:small;}

But using class, it seems this syntax doesn’t work, and judging from http://www.w3.org/TR/css3-selectors/#class-html I would have to write the above like this:

.someclass {font-family:"arial";  
        background-color:#FFFFFF;  
        width: 100%;  
        font-size: small;}  
th.someclass {background: #7AC142;  
             padding: 5px;  
            font-size:small;}

Can someone shed some light on which is the correct way, or if they are both correct, but there is a difference between class and CssClass in ASP.Net?

UPDATE

Ok, looks like they are the same thing….so, are the above syntaxes both correct when using class or cssclass, because they don’t seem to be.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

ASP.Net CssClass is an abstract wrapper around the css “class” specifier.

Essentially, for most intents and purposes, they are the same thing. When you set the CssClass property to some string like “someclass”, the html that the WebControl will render will be class = "someclass".

EDIT: The CSS selectors you have written are both “correct”, but they do two different things. “.someclass th” matches any descendant th element of an element that has the “someclass” class. The second one matches the th element itself that has the “someclass” class.

Hope that’s clear. Regardless of the way you specify the class for the elements (using ASP.Net’s CSSClass, or just setting the class), your CSS selectors will do the same thing. They don’t have anything to do with ASP.Net specifically.

Method 2

Actually, there is a difference between class and CssClass: the class will not be seen by the code behind, but the CssClass will.

Thus, if you add a new class to a control in your code behind, for example:

myControl.CssClass += " foo";

while your control is set as follows:

    <asp:TextBox class="Text" ID="myControl" runat="server" />

(Note class attribute: class="Text")

When inspecting your rendered element in your browser, you will see that it will be rendered as follows:

<input class=" foo" name="ctl00$MainContent$myControl" type="text" id="MainContent_myControl" >

(Note how the class has been overridden: class= " foo".)

If you set the CssClass on the other hand:

<asp:TextBox CssClass="Text" ID="myControl" runat="server" />

you will get it rendered (as expected) like so:

<input class="Text foo" name="ctl00$MainContent$myControl" type="text" id="MainContent_myControl">

(note the class has now both classes set, as expected! class="Text foo")

Method 3

When you use the CssClass attribute on an ASP.NET server control, it will render out as class in the HTML.

For example, if I were to use a label tag in my mark up:

<asp:label runat="server" CssClass="myStyle" AssociatedControlID="txtTitle" />

would render to:

<label class="myStyle" for="txtTitle" />

Method 4

There is no difference between the CssClass and class in Asp.Net other than the CssClass is a property of the Control and class is an attribute specified in the html. CssClass is rendered as the class attribute in Html.

Method 5

Also note that CssClass=”someclass anotherclass” works too as the string is carbon copied.

Method 6

so, are the above syntaxes both
correct when using class or cssclass,
because they don’t seem to be.

I am not sure what you mean when you say they do not “seem” to be correct? Do they render differently, even when you are using <table class='someClass'> in both cases?

IMHO, as far as the ‘class’ attribute is concerned, they are both correct. Did you try .someClass > th instead of .someClass th in the second case? That might solve the problem.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0