Applying classes to form controls

HTML question

[haran]

Hi,
I am beginner for HTML. Could you please answer me below questions.
1) How do you apply style classes on HTML controls?
2) What is the difference between these style classes?

a. .k-formlabel

b. td.k-formlabel

c. .k-formlabel td

[tedster]

Hello haran, and welcome to the forums.

.classname {rules} creates a set of CSS rules that will apply within ANY element that includes the attribute class="classname".

td.classname {rules} adds the restriction that the rules will only apply within a <td> element. So in <td class="classname"> the rules will apply, but in <img class="classname"> they will not.

.classname td {rules} says that the rules will only apply to a <td> that has a parent element with the classname. So in <tr class="classname"><td></td></tr>, the rules will apply to the td, but in <td class="classname"> they will not.

[haran]

Thanks a lot.
Do you know what is the answer for question one ?

[tedster]

I assume you mean form controls, right? The syntax is the same as it would be for applying a class to any html element. However, you may find some quirky browser support that you need to work around.

It's usually best to keep the styling minimal for form controls to keep usability as high as possible. You don't want the end user confused by your forms, so this is one of those places where being standard and slightly ugly brings better results than looking really slick but so unfamiliar that the user goes somewhere else.

[swa66]

Just one thing to add here:

.classname tr {...}

actually no only works on:
<table><tr class="classname"><td></td></tr></table>

but e.g. also on
<table class="classname"><tr><td></td></tr></table>
or if you use nested tables even on the <td>s in them too.

if you just want the direct chldren, you need to use :

.classname>tr {...}

Caveat: IE6 doesn;t do direct children, teach it to behave with I7.js or so.