How to change the style of createuserwizard ? ASP.nET

Question

I'm new to asp.net . I wanted to create a register page on my site so i dragged&dropped createuserwizard. It kinda did it's job, but my question is how to apply css styles on it ? I want to edit the textboxes, the labels and the button but all i see on my page is this :

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
        <WizardSteps>
            <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
            </asp:CompleteWizardStep>
        </WizardSteps>
    </asp:CreateUserWizard>
</asp:Content>

How to apply css code on it ? I want to apply classes. I tried with ContentTemplate but i kinda bugged its functionality. Is there any proper way to change the css ?

Answer 1

Have you tried using the 'CssClass' property? That should give you a parent class to at least let you target that, and then you'd either have to target the element(s) inside there, or override the default styles using the same classes.

Alternatively, why not wrap all those controls in a Div, then you could put your class on that, and then do as I stated above (have a targetable parent that would easily allow you to select the children inside it).

EDIT:

For example:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
        <WizardSteps>
            <asp:CreateUserWizardStep CssCLass="myClass" ID="CreateUserWizardStep1" runat="server">
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
            </asp:CompleteWizardStep>
        </WizardSteps>
    </asp:CreateUserWizard>
</asp:Content>

This is using the CssClass property

OR

<div class="myClass">
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
        <WizardSteps>
            <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
            </asp:CompleteWizardStep>
        </WizardSteps>
    </asp:CreateUserWizard>
</asp:Content>
</div>

This is wrapping the control in a div. Now that the parent div has a class, the children can be targeted. Example:

 .myClass > 'name of class automatically generated by the Wizard'{
     //styles here
}