Styling ASP.Net forms with CSS - asp.net

Question

I'm transitioning a website from plain html to ASP.Net.
I have two forms in the website frmRegister and frmLogin
I have css for the each of these like this...
form#frmRegister .floatRight input{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
font-weight: normal;
}
form#frmRegister .textRow input, form#frmRegister .textRow textarea, form#frmLogin .textRow input, form#frmLogin .textRow textarea, form#frmRegister .textRow select{
width: 90%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
}
but because asp renames the forms to aspNetform, the styles are not applied.
I tried adding aspNetform to the css but then every form gets given the same style.
I'm using master pages btw.

Answer 1

Don't style your CSS by ID. Use CSS classes instead.
<form id="myForm" runat="Server" class="someClass">
in css:
.someClass {background-color: blue; color:red; }
Although technically, I've never applied css to a form, so I'm not 100% sure the above will work. If I need to do that, I nest a div within the form, and apply the style to the div. So I'd change
<form id="myForm" runat="Server" class="someClass">
...
</form>
to
<form id="myForm" runat="Server" >
<div class="someClass">
...
</div>
</form>

Answer 2

Try giving the style based on the class name, instead of the ID.

Answer 3

I don't work with web forms, so there may be a better solution, but you could just address your forms via CSS classes rather than ids.
E.g., add a class frmRegister to that form tag, and then address it in CSS like this:
form.frmRegister .floatRight input{ width: 100%;
....

Answer 4

Have you tried the ClientID property of your controls?
Also on your css you can do something like:
form#<%=myControl.ClientID%>{
/* css in here */
}

Answer 5

Yes, forms represent a special element in a webforms app. Better to just define a class and apply that to your form, or even putting a div within the form and styling that.
Also, one big advantage over regular HTML is that you can stick all this in a master page. This way, you can tweak your overall page layout only in one place (the master page) and have those changes reflected on every page.

Answer 6

Are you embedding the styles in the pages/master page or is it in an external file? If you add the styles to the master page it will affect all of its child pages.